关于html:H5原生拖拽相关事件简介以及基础实现

23次阅读

共计 2805 个字符，预计需要花费 8 分钟才能阅读完成。

公司我的项目需要，要实现工作卡片在不同工作列表之间进行拖拽实现工作类别的更改。于是找了一下相干文章，略微学习了一下。实现成果如下图。

次要用到的是 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 吧。这应该也算是我的第一篇分享文章，心愿能坚持下去。