如何使用HTML5实现多个元素的拖放功能
myzbx 2024-12-31 13:10 30 浏览
通过使用HTML5的拖放功能我们可以拖放HTML页面元素。在上一篇文章中，我们介绍了有关于可以拖放单个元素的代码。在接下来的这篇文章中，我们将来介绍关于允许拖放多个元素的代码。
话不多说，我们直接看示例
示例一：使用UL标记拖放多个元素
代码如下：
ListDragDrop.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="ListDragDrop.css"/>
<script>
function load() {
var delbox = document.getElementById('del');
delbox.addEventListener('dragover', onDragOver, false);
delbox.addEventListener('drop', onDrop, false);
var elems = document.querySelectorAll('ul#list1 > li');
for (var i = 0; i < elems.length; i++) {
el = elems[i];
el.setAttribute('draggable', 'true');
el.addEventListener('dragstart', onDragStart, false);
}
}
function onDragStart(e) {
e.dataTransfer.effectAllowed = 'copy';
e.dataTransfer.setData('text', this.id);
}
function onDragOver(e) {
e.preventDefault();
}
function onDrop(e) {
if (e.stopPropagation) e.stopPropagation();
var eid = e.dataTransfer.getData('text');
var elem = document.getElementById(eid);
elem.parentNode.removeChild(elem);
}
</script>
</head>
<body onload="load();">
<div id="del">删除</div>
<ul id="list1">
<li id="1">海豚</li>
<li id="2">鲸鱼</li>
<li id="3">企鹅</li>
<li id="4">北极熊</li>
<li id="5">雪狐</li>
</ul>
</ul>
</body>
</html>
ListDragDrop.css
#del{
width:120px;
height:60px;
border: solid 2px #ff6a00;
}
ul#list1 > li {
display: block;
width: 150px;
border: 1px solid #808080;
}
说明：
加载页面时执行加载功能。load函数中的以下代码将dragover和drop事件分配给[Delete]的div。当元素被拖动到Delete框时，会调用onDragOver函数，当它被删除时，会调用onDrop函数。
var delbox = document.getElementById('del');
delbox.addEventListener('dragover', onDragOver, false);
delbox.addEventListener('drop', onDrop, false);
调用querySelectorAll方法以获取ul标记中的li元素。for循环反复处理中获取的元素数组，并将每个元素的“draggable”属性设置为true。此过程将其设置为可拖动对象。它还分配了一个dragstart事件。
var elems = document.querySelectorAll('ul#list1 > li');
for (var i = 0; i < elems.length; i++) {
el = elems[i];
el.setAttribute('draggable', 'true');
el.addEventListener('dragstart', onDragStart, false);
}
拖动列表项时，将调用以下onDragStart函数。调用dataTransfer对象的setData方法以在dataTransfer对象中存储元素的ID。
function onDragStart(e) {
e.dataTransfer.effectAllowed = 'copy';
e.dataTransfer.setData('text', this.id);
}
当在拖放区域中拖动列表中的项目时，将调用以下onDragOver函数。由于DragOver没有特别的处理，因此它调用PreventDefault方法来取消事件。
function onDragOver(e) {
e.preventDefault();
}
如果列表的项目在拖放区域内被删除，则可以调用onDrop函数。调用stopPropagation方法取消事件的处理。然后，我们从dataTransfer对象中获取ID。通过取得ID，您可以获得丢弃区域中丢弃的元素。调用getElementById方法并从ID中获取LI标记的对象。通过使用获取的LI对象的paerntNode属性访问父节点，调用removeChild方法，删除被丢弃的列表的项目。
function onDrop(e) {
if (e.stopPropagation) e.stopPropagation();
var eid = e.dataTransfer.getData('text');
var elem = document.getElementById(eid);
elem.parentNode.removeChild(elem);
}
运行结果：
使用Web浏览器显示上述HTML文件。将显示如下所示的效果。
可以拖动页面底部列表中的项目。比如拖动“企鹅”这一项，将其拖动到删除区域，然后下面列表项中就没有第三项“企鹅”了，具体效果如下图所示
拖动其他项都是一样的效果，五项都可以删除。
以上就是如何使用HTML5实现多个元素的拖放功能的详细内容，更多请关注其它相关文章！
更多技巧请《转发 + 关注》哦！
- 上一篇：如何使用HTML5实现拖放单个元素
- 下一篇：HTML5新增了哪些结构标签?
相关推荐
- 网易《逆水寒》手游【逆水侠棋】首次正式更新，近 50 项调整优化
-
IT之家7月23日消息，网易《逆水寒》手游于6月27日迎来二周年资料片，推出了特色自走棋玩法【逆水侠棋】。游戏官方今日宣布，【逆水侠棋】玩法上线以来已经进行了4000多万场的对局，...
- 消息称英特尔Arrow Lake-S Refresh处理器下半年发布，升级NPU
-
IT之家7月7日消息，韩媒ZDNETKorea当地时间4日报道称，英特尔酷睿Ultra200S"ArrowLake-S"处理器的Refresh刷新版本将...
- 用户中心——比如:腾讯的QQ账号可以登录到很多应用当中 02
-
用户中心——比如：腾讯的QQ账号可以登录到很多应用当中02@[toc]前端登录注册blankTarget表示是一个用户点击时跳转时，是打开一个新的页面还是，在本地页面覆盖。constants公共...
- 英特尔发布6862图形驱动，相比Q1版本性能最高提升37%
-
IT之家7月11日消息，英特尔公司于7月8日，面向锐炫（Arc）B、A系列显卡、集成Arc核显的酷睿Ultra系列处理器，发布了32.0.101.6862（Q2.25）图...
- Cryin:BLG打不过AL，与T1无缘了!JDG首发xiaoxu，WBG世界赛有望
-
【关注残影游戏，看LOL最新资讯，来看下这一期的撸圈日报吧！】TOP1Cryin：BLG打不过AL，与T1无缘了！在MSI的比赛中，AL与BLG双双输给了LCK，只不过AL终究是和GEN打满了五局，但...
- 安装SOLIDWORKS出现错误:“已安装较新版本”如何解决?
-
-SOLIDWORKS常见问题及技巧分享52-PART1：客户问题客户使用了SOLIDWORKS2024SP5版本作业，由于公司接到一个订单要求使用SOLIDWORKS2018...
- 《托尼·霍克职业滑板3+4》Xbox平台版本现已开启预载
-
《托尼·霍克职业滑板3+4》现已在Xbox平台开启预载，玩家可提前为7月11日的正式发售做准备。此外，官方还公布了XboxSeriesX|S版本的一些新细节。在《托尼·霍克职业滑板1+2》发售近...
- SRAM套件会让整车更轻吗?车手战车:罗格利奇的S-Works Tarmac SL8
-
普里莫茨·罗格利奇（PrimozRoglic）以红牛-博拉-汉斯格雅车队主将的身份开启了2025年环法之旅。随着高山赛段的争夺，环法进入白热化阶段，罗格利奇的总成绩也在不断上升中。弗洛里...
- MST 全新一代 RMX 4 S PRO 正式登场
-
MST（MaxSpeedTechnology，得隆科技）正式宣布，下一代RMX漂移底盘即将登场，命名为RMX4。全新RMX4延续当前主流的后驱（RWD）漂移布局，在经典架构的基础上大...
- S960Q钢板综合解析S960Q钢板化学成分
-
S960Q钢板综合解析（欧标EN10025-6）一、化学成分S960Q采用低碳+微合金化设计，化学成分严格控制杂质元素，核心配比如下：元素含量范围关键作用碳(C)≤0.20%保障焊接性及韧性锰...
- 英伟达优化DLSS 4:Transformer模型显存占用减少20%
-
IT之家6月29日消息，除了推出DLSS4正式版，英伟达还在其最新的DLSSSDK版本中对显存（VRAM）使用进行了优化。VideoCardz发现，DLSS310.3.0将...
- 消息称三星工艺高通SM8850s“套片报价更低，可能明年才会上”
-
IT之家7月2日消息，消息源@数码闲聊站今日表示，其最近又“摸到”了采用三星晶圆代工SF2工艺、代号为SM8850s的高通SM8850旗舰移动芯片变体。这位博主表示：“听说(...
- 防止开源供应链“下毒”，谷歌推出OSS Rebuild项目
-
IT之家7月22日消息，为提升开源项目的安全性，谷歌今日推出了OSSRebuild，开发者可利用该工具通过重现构建过程来验证开源软件包的完整性，从而避免开源供应链“下毒”情况。谷歌介绍称，...
- 向经典致敬!2025本田GB350/S披上70年代蓝白新色登场
-
Honda发表了新复古车款GB350及其衍生版本GB350S的2025年款。这是自2023年以来，时隔两年的改款，除了变更了头尾灯及仪表的规格外，还首次采用了双色调配色。车辆规格与配备方面则没有变更。...
- 铠侠推出目前最大容量固态硬盘:企业级LC9新增245.76TB版本
-
IT之家7月22日消息，铠侠日本当地时间今日宣布为主打大容量存储的LC9系列企业级固态硬盘新增245.76TB版本。这一新型号在成为目前最大容量SSD的同时也是首款来到256TB...
- 一周热门
- 最近发表
-
- 网易《逆水寒》手游【逆水侠棋】首次正式更新，近 50 项调整优化
- 消息称英特尔Arrow Lake-S Refresh处理器下半年发布，升级NPU
- 用户中心——比如:腾讯的QQ账号可以登录到很多应用当中 02
- 英特尔发布6862图形驱动，相比Q1版本性能最高提升37%
- Cryin:BLG打不过AL，与T1无缘了!JDG首发xiaoxu，WBG世界赛有望
- 安装SOLIDWORKS出现错误:“已安装较新版本”如何解决?
- 《托尼·霍克职业滑板3+4》Xbox平台版本现已开启预载
- SRAM套件会让整车更轻吗?车手战车:罗格利奇的S-Works Tarmac SL8
- MST 全新一代 RMX 4 S PRO 正式登场
- S960Q钢板综合解析S960Q钢板化学成分
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)