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

次要用到的是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.cnblogs.com/wenru...
https://www.runoob.com/try/tr...