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

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

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

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

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

相关推荐

使用Assembly打包和部署Spring Boot工程

SpringBoot项目的2种部署方式目前来说，SpringBoot项目有如下2种常见的部署方式一种是使用docker容器去部署。将SpringBoot的应用构建成一个docke...

java高级用法之:调用本地方法的利器JNA

简介JAVA是可以调用本地方法的，官方提供的调用方式叫做JNI，全称叫做javanativeinterface。要想使用JNI，我们需要在JAVA代码中定义native方法，然后通过javah命令...

Linux中如何通过Shell脚本来控制Spring Boot的Jar包启停服务?

SpringBoot项目在为开发者带来方便的同时，也带来了一个新的问题就是Jar包如何启动？在一般情况下我们都是采用了最为经典的java-jar命令来进行启动。然后通过ps命令找到对应的应用线程通...

牛逼!自己手写一个热加载（人民币手写符号一个横还是两个横）

热加载：在不停止程序运行的情况下，对类（对象）的动态替换JavaClassLoader简述Java中的类从被加载到内存中到卸载出内存为止，一共经历了七个阶段：加载、验证、准备、解析、初始化、使用、...

java 错误: 找不到或无法加载主类?看看怎么解决吧!

问题扫述：项目名称调整，由原来的com.mp.qms.report.biz调整为com.mp.busicen.mec.qms.report.biz后。项目在IDEA直接运行，但打包部署到服务器...

如何将 Spring Boot 工程打包成独立的可执行 JAR 包

导语：通过将SpringBoot项目打包成独立的可执行JAR包，可以方便地在任何支持Java环境的机器上运行项目。本文将详细介绍如何通过Maven构建插件将SpringBoot...

class 增量发包改造为 jar 包方式发布

大纲class增量发包介绍项目目录结构介绍jar包方式发布落地方案class增量发包介绍当前项目的迭代修复都是通过class增量包来发版本的将改动的代码class增量打包,如下图cla...

Jar启动和IDE里启动Sprintboot的区别

想聊明白这个问题，需要补充一些前提条件，比如Fatjar、类加载机制等1、Fatjar我们在开发业务程序的时候，经常需要引用第三方的jar包，最终程序开发完成之后，通过打包程序，会把自己的代码和三...

Java 20年，以后将往哪儿走?（java还能流行多久）

在今年的Java20周年的庆祝大会中，JavaOne2015的中心议题是“Java的20年”。甲骨文公司Java平台软件开发部的副总裁GeorgesSaab的主题演讲就将关注点放在了java...

Spring Boot Jar 包秒变 Docker 镜像实现多环境部署

你是否在互联网大厂后端开发工作中，遇到过这样的困扰？当完成一个SpringBoot项目开发，准备将Jar包部署到不同环境时，却发现各个环境依赖不同、配置复杂，部署过程繁琐又容易出错，不仅耗费...

从0开始，让你的Spring Boot项目跑在Linux服务器

1搭建Linux服务器1.1购买阿里云服务器或安装虚拟机这里建议是CentOS7.X或CentOS8.X，当然其他的Linux如deepin、Ubuntu也可以，只是软件环境的安装包和安装方式...

【技术】Maven 上传第三方jar包到私服

通过nexus后台上传私服以NexusRepositoryManagerOSS2.14.5-02为例。登录nexus后台。定义Maven坐标Maven坐标有两种方式：1.自定义参数；2....

JVM参数、main方法的args参数使用

一、前言我们知道JVM参数分为自定义参数、JVM系统参数，Javamain方法的参数。今天就谈谈怎么使用吧。二、查看jvm参数定义自定义参数我们打开cmd窗口，输入java，就能看到自定义参数的格式...

Maven项目如何发布jar包到Nexus私服

Maven项目发布jar包到Nexus私服在编码过程中，有些通用的代码模块，有时候我们不想通过复制粘贴来粗暴地复用。因为这样不仅体现不了变化，也不利于统一管理。这里我们使用mavendeploy的方...

干货丨Hadoop安装步骤!详解各目录内容及作用

Hadoop是Apache基金会面向全球开源的产品之一，任何用户都可以从ApacheHadoop官网下载使用。今天，播妞将以编写时较为稳定的Hadoop2.7.4版本为例，详细讲解Hadoop的安...

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