百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

如何使用HTML5实现多个元素的拖放功能

liuian 2025-04-26 19:25 37 浏览

通过使用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实现多个元素的拖放功能的详细内容，更多请关注其它相关文章！

更多技巧请《转发 + 关注》哦！

相关推荐

怎样解除自动关机模式（怎样解除自动开关机）

1、打开手机主界面，找到系统自带的“时钟”应用，点击打开它。2、点击进入时钟后，点击右下角的“计时器”。3、进入到计时器后，点击“在计时结束启用雷达”这个选项。4、然后在这里，下拉到最下面，勾选“停...

电脑最高配置是什么配置2025

一，2023最新主流电脑装机配置如下。二，处理器可以使用十二代的i512400或者i512490f，内存16gb双通道，显卡rtx3060，主板可以使用b660m或者h610m。三，如果十三代酷睿...

MySQL慢查询优化:从explain到索引，DBA手把手教你提升10倍性能

数据库性能是应用系统的生命线，而慢查询就像隐藏在系统中的定时炸弹。某电商平台曾因一条未优化的SQL导致订单系统响应时间从200ms飙升至8秒，最终引发用户投诉和订单流失。今天我们就来系统学习MySQL...

一文读懂SQL五大操作类别(DDL/DML/DQL/DCL/TCL)的基础语法

在SQL中，DDL、DML、DQL、DCL、TCL是按操作类型划分的五大核心语言类别，缩写及简介如下：DDL（DataDefinitionLanguage，数据定义语言）：用于定义和管理数据库结构...

闲来无事，学学Mysql增、删，改，查

Mysql增、删，改，查1“增”——添加数据1.1为表中所有字段添加数据1.1.1INSERT语句中指定所有字段名语法：INSERTINTO表名（字段名1，字段名2，…）VALUES（值1...

数据库:MySQL 高性能优化规范建议

数据库命令规范所有数据库对象名称必须使用小写字母并用下划线分割所有数据库对象名称禁止使用MySQL保留关键字（如果表名中包含关键字查询时，需要将其用单引号括起来）数据库对象的命名要能做到见名识意，...

下载工具合集_下载工具手机版

迅雷，在国内的下载地位还是很难撼动的，所需要用到的地方还挺多。缺点就是不开会员，软件会限速。EagleGet，全能下载管理器，支持HTTP(S)FTPMMSRTSP协议，也可以使用浏览器扩展检测...

mediamtx v1.15.2 更新详解:功能优化与问题修复

mediamtxv1.15.2已于2025年10月14日发布，本次更新在功能、性能优化以及问题修复方面带来了多项改进，同时也更新了部分依赖库并提升了安全性。以下为本次更新的详细内容：...

声学成像仪:泄露监测 “雷达” 方案开启精准防控

声学成像仪背景将声像图与阵列上配装的摄像实所拍的视频图像以透明的方式叠合在一起，就形成了可直观分析被测物产生状态。这种利用声学、电子学和信息处理等技术，变换成人眼可见的图像的技术可以帮助人们直观地认识...

最稳存储方案:两种方法将摄像头接入威联通Qu405，录像不再丢失

今年我家至少被4位邻居敲门，就是为了查监控！！！原因是小区内部监控很早就停止维护了，半夜老有小黄毛掰车门偷东西，还有闲的没事划车的，车主损失不小，我家很早就配备监控了，人来亮灯有一定威慑力，不过监控设...

离岗检测算法_离岗检查内容

一、研发背景如今社会许多岗位是严禁随意脱离岗位的，如塔台、保安室、监狱狱警监控室等等，因为此类行为可能会引起重大事故，而此类岗位监督管理又有一定困难，因此促生了智能视频识别系统的出现。二、产品概述及工...

消防安全通道占用检测报警系统_消防安全通道占用检测报警系统的作用

一、产品概述科缔欧消防安全通道占用检测报警系统，是创新行业智能监督管理方式、完善监管部门动态监控及预警预报体系的信息化手段，是实现平台远程监控由“人为监控”向“智能监控”转变的必要手段。产品致力于设...

外出住酒店、民宿如何使用手机检测隐藏的监控摄像头

最近，一个家庭在他们的民宿收到了一个大惊喜：客厅里有一个伪装成烟雾探测器的隐藏摄像头，监视着他们的一举一动。隐藏摄像头的存在如果您住在酒店或民宿，隐藏摄像头不应再是您的担忧。对于民宿，房东应报告所有可...

基于Tilera众核平台的流媒体流量发生系统的设计

曾帅，高宗彬，赵国锋（重庆邮电大学通信与信息工程学院，重庆400065）摘要：设计了一种基于Tilera众核平台高强度的流媒体流量发生系统架构，其主要包括：系统界面管理模块、服务承载模块和流媒体...

使用ffmpeg将rtsp流转流实现h5端播放

1.主要实现rtsp转tcp协议视频流播放ffmpeg下载安装（公认业界视频处理大佬）a、官网地址：www.ffmpeg.org/b、gitHub：github.com/FFmpeg/FFmp…c、推...

一周热门
最近发表
标签列表