Html5原生拖拽相关事件简介以及基础实现

ID:16126 / 打印

公司项目需求,要实现任务卡片在不同任务列表之间进行拖拽实现任务类别的更改。于是找了一下相关文章,稍微学习了一下。实现效果如下图。

拖拽实现

主要用到的是H5自带的拖拽效果。其实项目前端部分是使用React编写的,也是在使用H5实现了之后才了解到Dan Abramov大佬有个React-DnD组件对原生拖拽方法进行了封装。稍微学习了一下,很强。后续有使用到再写篇文章进行分享。

相关事件定义与用法

涉及一个属性六个事件。事件均为H5原生事件。

属性

  • draggable:正常div是不允许进行拖动的。需要添加属性draggable="true"将元素设置为可拖动。
     

事件

  • ondragstart:拖拽元素事件。在被拖拽时被调用。
  • ondrag:拖拽元素事件。在元素正在被拖拽时调用。
  • ondragend:拖拽元素事件。在拖拽元素放置时调用。
  • ondragenter:放置元素事件。在拖拽元素进入到放置元素有效区域时调用。
  • ondragover:放置元素事件。在拖拽元素覆盖放置元素有效区域时调用
  • ondragleave:放置元素事件。在拖拽元素离开放置元素有效区域时调用。
  • ondrop:放置元素事件。在拖拽元素被放置在放置元素中调用。
     

基础代码实现

拖拽元素相关事件实现代码如下。

 function handleOndragstart() {     /*     该事件为拖拽元素被拖拽时调用。一般用于获取该拖拽元素的唯一标识,如id等。以方便后续数据更新时进行元素定位      */ }  function handleOndragend() {     /*     该事件在拖拽元素被放置时调用。一般用于重置变量操作      */ }  function handleOndrag() {     /*     该事件凭个人需求进行功能实现      */ }  

拖拽元素H5代码如下

 <div       draggable="true"       ondragstart="handleOndragstart()"       ondrag="handleOndarg()"       ondragend="handleOndragend()"      >     该元素为拖拽元素 </div> 

放置元素相关事件实现代码如下

 /* 默认情况下,数据/元素不能放置到其他元素中。 如果要实现该功能,我们需要防止元素的默认处理方法。我们可以通过调用 event.preventDefault() 方法来实现 ondragover 事件。  */ function handleOndragover(event) {     event.preventDefault();     /*     在这里进行你的函数处理      */ }  function handleOndragenter(event) {     event.preventDefault();     /*     在这里进行你的函数处理      */ }  function handleOndragleave(event) {     event.preventDefault();     /*     在这里进行你的函数处理      */ }  function handleOndrop(event) {     event.preventDefault();  // 清除默认事件。drop 事件的默认行为是以链接形式打开     /*     一般在该事件中,也就是拖拽元素被放下的时候与后端进行交互进行数据更新      */ }  

放置元素H5代码如下

 <div       ondragenter="handleOndragenter(event)"       ondragover="handleOndragover(event)"       ondragleave="handleOndragleave(event)"       ondrop=“handleOndrop(event)      >     该元素为放置元素 </div> 

实例

以下代码可实现在两个div之间进行子元素的拖拽

 <!DOCTYPE html> <html lang="zh-CN">   <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <title>拖拽实现</title>     <style type="text/css">       .parent {         display: flex;         width: 450px;         justify-content: space-around;       }       .container {         height: 300px;         width: 200px;         background-color: rgba(255, 255, 0, 0.3);         display: flex;         flex-direction: column;         justify-content: center;         align-items: center;       }       .box {         width: 100px;         height: 50px;         background-color: rgba(255, 255, 255, 1);       }     </style>     <script type="text/javascript">       function handleOndragstart(event) {         // 设置被拖动的数据,可简单理解为设置Box的值为被拖动元素的id。此处为"Box"         event.dataTransfer.setData("Box", event.target.id);       }       function handleOndragover(event) {         event.preventDefault();       }       function handleOndrop(event) {           // 拖拽元素被放下时调用         event.preventDefault();         var data = event.dataTransfer.getData("Box");         // 将拖拽元素追加到改放置元素中         event.target.appendChild(document.getElementById(data));       }     </script>   </head>    <body>     <div class="parent">       <div         class="container"         ondragover="handleOndragover(event)"         ondrop="handleOndrop(event)"       >         <div           class="box"           draggable="true"           id="Box"           ondragstart="handleOndragstart(event)"         ></div>       </div>       <div         class="container"         ondragover="handleOndragover(event)"         ondrop="handleOndrop(event)"       ></div>     </div>   </body> </html>

最后

暂时写这么多吧。以上的实例也是用H5写的,并没有使用React实现。以后再试着写个React版的简单demo吧。这应该也算是我的第一篇分享文章,希望能坚持下去。

参考链接:
https://www.jb51.net/article/154105.htm
https://www.runoob.com/try/try.php?filename=tryhtml5_draganddrop2

上一篇: 关于HTML5+ API plusready的兼容问题
下一篇: Canvas获取视频第一帧缩略图的实现

作者:admin @ 24资源网   2024-11-01

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。