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

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

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

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

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

相关推荐

深入解析 MySQL 8.0 JSON 相关函数:解锁数据存储的无限可能

引言在现代应用程序中，数据的存储和处理变得愈发复杂多样。MySQL8.0引入了丰富的JSON相关函数，为我们提供了更灵活的数据存储和检索方式。本文将深入探讨MySQL8.0中的JSON...

MySQL的Json类型个人用法详解（mysql json类型对应java什么类型）

前言虽然MySQL很早就添加了Json类型，但是在业务开发过程中还是很少设计带这种类型的表。少不代表没有，当真正要对Json类型进行特定查询，修改，插入和优化等操作时，却感觉一下子想不起那些函数怎么使...

MySQL的json查询之json_array（mysql json_search）

json_array顾名思义就是创建一个数组，实际的用法，我目前没有想到很好的使用场景。使用官方的例子说明一下吧。例一selectjson_array(1,2,3,4);json_array虽然单独...

头条创作挑战赛#一、LSTM 原理 长短期记忆网络

#头条创作挑战赛#一、LSTM原理长短期记忆网络（LongShort-TermMemory，LSTM）是一种特殊类型的循环神经网络（RNN），旨在解决传统RNN在处理长序列数据时面临的梯度...

TensorBoard最全使用教程:看这篇就够了

机器学习通常涉及在训练期间可视化和度量模型的性能。有许多工具可用于此任务。在本文中，我们将重点介绍TensorFlow的开源工具套件，称为TensorBoard，虽然他是TensorFlow...

图神经网络版本的Kolmogorov Arnold(KAN)代码实现和效果对比

本文约4600字，建议阅读10分钟本文介绍了图神经网络版本的对比。KolmogorovArnoldNetworks(KAN)最近作为MLP的替代而流行起来，KANs使用Kolmogorov-Ar...

kornia，一个实用的 Python 库!（python kkb_tools）

大家好，今天为大家分享一个实用的Python库-kornia。Github地址：https://github.com/kornia/kornia/Kornia是一个基于PyTorch的开源计算...

图像分割掩码标注转YOLO多边形标注

Ultralytics团队付出了巨大的努力，使创建自定义YOLO模型变得非常容易。但是，处理大型数据集仍然很痛苦。训练yolo分割模型需要数据集具有其特定格式，这可能与你从大型数据集中获得的...

[python] 向量检索库Faiss使用指北

Faiss是一个由facebook开发以用于高效相似性搜索和密集向量聚类的库。它能够在任意大小的向量集中进行搜索。它还包含用于评估和参数调整的支持代码。Faiss是用C++编写的，带有Python的完...

如何把未量化的 70B 大模型加载到笔记本电脑上运行?

并行运行70B大模型我们已经看到，量化已经成为在低端GPU（比如Colab、Kaggle等）上加载大型语言模型（LLMs）的最常见方法了，但这会降低准确性并增加幻觉现象。那如果你和你的朋友们...

ncnn+PPYOLOv2首次结合!全网最详细代码解读来了

编辑：好困LRS【新智元导读】今天给大家安利一个宝藏仓库miemiedetection，该仓库集合了PPYOLO、PPYOLOv2、PPYOLOE三个算法pytorch实现三合一，其中的PPYOL...

人工智能——图像识别（人工智能图像识别流程）

概述图像识别（ImageRecognition）是计算机视觉的核心任务之一，旨在通过算法让计算机理解图像内容，包括分类（识别物体类别）、检测（定位并识别多个物体）、分割（像素级识别）等，常见的应用场...

PyTorch 深度学习实战(15):Twin Delayed DDPG (TD3) 算法

在上一篇文章中，我们介绍了DeepDeterministicPolicyGradient(DDPG)算法，并使用它解决了Pendulum问题。本文将深入探讨TwinDelayed...

大模型中常用的注意力机制GQA详解以及Pytorch代码实现

分组查询注意力(GroupedQueryAttention)是一种在大型语言模型中的多查询注意力(MQA)和多头注意力(MHA)之间进行插值的方法，它的目标是在保持MQA速度的同时...

pytorch如何快速创建具有特殊意思的tensor张量?

专栏推荐正文我们通过值可以看到torch.empty并没有进行初始化创建tensor并进行随机初始化操作，常用rand/rand_like,randint正态分布（0，1）指定正态分布的均值还有方差i...

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