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

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

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

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

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

相关推荐

eino v0.4.5版本深度解析:接口类型处理优化与错误机制全面升级

近日，eino框架发布了v0.4.5版本，该版本在错误处理、类型安全、流处理机制以及代理配置注释等方面进行了多项优化与修复。本次更新共包含6个提交，涉及10个文件的修改，由2位贡献者共同完成。本文将详...

SpringBoot异常处理_springboot异常注解

在SpringBoot中，异常处理是构建健壮、可维护Web应用的关键部分。良好的异常处理机制可以统一返回格式、提升用户体验、便于调试和监控。以下是SpringBoot中处理异常的完整指...

Jenkins运维之路(Jenkins流水线改造Day02-1-容器项目)

这回对线上容器服务器的流水线进行了一定的改造来满足目前线上的需求，还是会将所有的自动化脚本都放置到代码库中统一管理，我感觉一章不一定写的完，所以先给标题加了个-1，话不多说开干1.本次流水线的流程设计...

告别宕机!零基础搭建服务器监控告警系统!小白也能学会!

前言本文将带你从零开始，一步步搭建一个完整的服务器指标监控与邮件告警系统，使用的技术栈均为业界主流、稳定可靠的开源工具：Prometheus：云原生时代的监控王者，擅长指标采集与告警规则定义Node_...

httprunner实战接口测试笔记，拿走不谢

每天进步一点点，关注我们哦，每天分享测试技术文章本文章出自【码同学软件测试】码同学公众号：自动化软件测试码同学抖音号：小码哥聊软件测试01开始安装跟创建项目pipinstallhttprunne...

基于JMeter的性能压测平台实现_jmeter压测方案

这篇文章已经是两年前写的，短短两年时间，JMeter开源应用技术的发展已经是翻天覆地，最初由github开源项目zyanycall/stressTestPlatform形成的这款测试工具也开始慢...

12K+ Star!新一代的开源持续测试工具!

大家好，我是Java陈序员。在企业软件研发的持续交付流程中，测试环节往往是影响效率的关键瓶颈，用例管理混乱、接口调试复杂、团队协作不畅、与DevOps流程脱节等问题都能影响软件交付。今天，给大家...

Spring Boot3 中分库分表之后如何合并查询

在当今互联网应用飞速发展的时代，数据量呈爆发式增长。对于互联网软件开发人员而言，如何高效管理和查询海量数据成为了一项关键挑战。分库分表技术应运而生，它能有效缓解单库单表数据量过大带来的性能瓶颈。而在...

离线在docker镜像方式部署ragflow0.17.2

经常项目上会出现不能连外网的情况，要怎么使用ragflow镜像部署呢，这里提供详细的步骤。1、下载基础镜像根据docker-compose-base.yml及docker-compose.yml中的i...

看，教你手写一个最简单的SpringBoot Starter

何为Starter？想必大家都使用过SpringBoot，在SpringBoot项目中，使用最多的无非就是各种各样的Starter了。那何为Starter呢？你可以理解为一个可拔插式...

《群星stellaris》军事基地跳出怎么办?解决方法一览

《群星stellaris》军事基地跳出情况有些小伙伴出现过这种情况，究竟该怎么解决呢？玩家“gmjdadk”分享的自己的解决方法，看看能不能解决。我用英文原版、德语、法语和俄语四个版本对比了一下，结果...

数据开发工具dbt手拉手教程-03.定义数据源模型

本章节介绍在dbt项目中，如何定义数据源模型。定义并引入数据源通过Extract和Load方式加载到仓库中的数据，可以使用dbt中的sources组件进行定义和描述。通过在dbt中将这些数据集(表)声...

docker compose 常用命令手册_docker-compose init

以下是DockerCompose常用命令手册，按生命周期管理、服务运维、构建配置、扩缩容、调试工具分类，附带参数解析、示例和关键说明，覆盖多容器编排核心场景：一、生命周期管理（核心命令...

RagFlow与DeepSeek R1本地知识库搭建详细步骤及代码实现

一、环境准备硬件要求独立显卡（建议NVIDIAGPU，8GB显存以上）内存16GB以上，推荐32GB（处理大规模文档时更高效）SSD硬盘（加速文档解析与检索）软件安装bash#必装组件Docker...

Docker Compose 配置更新指南_docker-compose配置

高效管理容器配置变更的最佳实践方法重启范围保留数据卷适用场景docker-composeup-d变更的服务常规配置更新--force-recreate指定/所有服务强制重建down→up流程...

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