如何使用HTML5实现多个元素的拖放功能-H5教程-PHP中文网

首页

web前端

H5教程

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

不言

Dec 01, 2018 pm 02:52 PM

通过使用HTML5的拖放功能我们可以拖放HTML页面元素。在上一篇文章中，我们介绍了有关于可以拖放单个元素的代码。在接下来的这篇文章中，我们将来介绍关于允许拖放多个元素的代码。

HTML5拖放

话不多说，我们直接看示例

示例一：使用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(&#39;del&#39;);
      delbox.addEventListener(&#39;dragover&#39;, onDragOver, false);
      delbox.addEventListener(&#39;drop&#39;, onDrop, false);      
      var elems = document.querySelectorAll(&#39;ul#list1 > li&#39;);      
      for (var i = 0; i < elems.length; i++) {
        el = elems[i];
        el.setAttribute(&#39;draggable&#39;, &#39;true&#39;);
        el.addEventListener(&#39;dragstart&#39;, onDragStart, false);
      }
    }    
function onDragStart(e) {
      e.dataTransfer.effectAllowed = &#39;copy&#39;;
      e.dataTransfer.setData(&#39;text&#39;, this.id);
    }    
function onDragOver(e) {
      e.preventDefault();
    }    
function onDrop(e) {
      if (e.stopPropagation) e.stopPropagation();      
      var eid = e.dataTransfer.getData(&#39;text&#39;);      
      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(&#39;del&#39;);
  delbox.addEventListener(&#39;dragover&#39;, onDragOver, false);
  delbox.addEventListener(&#39;drop&#39;, onDrop, false);

登录后复制

调用querySelectorAll方法以获取ul标记中的li元素。for循环反复处理中获取的元素数组，并将每个元素的“draggable”属性设置为true。此过程将其设置为可拖动对象。它还分配了一个dragstart事件。

var elems = document.querySelectorAll(&#39;ul#list1 > li&#39;);  
for (var i = 0; i < elems.length; i++) {
    el = elems[i];
    el.setAttribute(&#39;draggable&#39;, &#39;true&#39;);
    el.addEventListener(&#39;dragstart&#39;, onDragStart, false);
  }

登录后复制

拖动列表项时，将调用以下onDragStart函数。调用dataTransfer对象的setData方法以在dataTransfer对象中存储元素的ID。

function onDragStart(e) {
      e.dataTransfer.effectAllowed = &#39;copy&#39;;
      e.dataTransfer.setData(&#39;text&#39;, 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(&#39;text&#39;);      
var elem = document.getElementById(eid);
      elem.parentNode.removeChild(elem);
    }

登录后复制

运行结果：

使用Web浏览器显示上述HTML文件。将显示如下所示的效果。

HTML拖放

可以拖动页面底部列表中的项目。比如拖动“企鹅”这一项，将其拖动到删除区域，然后下面列表项中就没有第三项“企鹅”了，具体效果如下图所示

微信截图_20181201144455.png

HTML5拖放

拖动其他项都是一样的效果，五项都可以删除。

以上是如何使用HTML5实现多个元素的拖放功能的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7554

CakePHP 教程

1382

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

h5项目怎么运行 Apr 06, 2025 pm 12:21 PM

运行 H5 项目需要以下步骤：安装 Web 服务器、Node.js、开发工具等必要工具。搭建开发环境，创建项目文件夹、初始化项目、编写代码。启动开发服务器，使用命令行运行命令。在浏览器中预览项目，输入开发服务器 URL。发布项目，优化代码、部署项目、设置 Web 服务器配置。

H5页面制作究竟指什么 Apr 06, 2025 am 07:18 AM

H5 页面制作是指使用 HTML5、CSS3 和 JavaScript 等技术，创建跨平台兼容的网页。其核心在于浏览器解析代码，渲染结构、样式和交互功能。常见技术包括动画效果、响应式设计和数据交互。为避免错误，应使用开发者工具调试；而性能优化和最佳实践则包括图像格式优化、减少请求和代码规范等，以提高加载速度和代码质量。