JS拖拽插件实现步骤

JS拖拽插件实现步骤：

监听拖拽事件；

在拖拽开始时，需要给拖拽元素添加监听拖拽开始事件，即 dragstart 事件。在拖拽结束时，需要给拖拽元素的父元素添加监听拖拽结束事件，即 drop 事件和 dragover 事件。代码示例：

// 拖拽开始
document.getElementById('drag-elem').addEventListener('dragstart', function(e) {
  e.dataTransfer.setData('text', e.target.id);
});

// 拖拽结束
document.getElementById('drop-elem').addEventListener('drop', function(e) {
  e.preventDefault();
  var data = e.dataTransfer.getData('text');
  e.target.appendChild(document.getElementById(data));
});

document.getElementById('drop-elem').addEventListener('dragover', function(e) {
  e.preventDefault();
});

设置拖拽元素的 draggable 属性为 true；

需要将需要拖拽的元素的 draggable 属性设置为 true。代码示例：

<div id="drag-elem" draggable="true">拖拽元素</div>

设置放置区域的 dropzone 属性为 copy 或 move；

需要将可放置的区域添加 dropzone 属性并设置为 copy 或 move，表示可复制或移动拖拽元素到该区域。代码示例：

<div id="drop-elem" dropzone="copy">放置区域</div>

获取拖拽数据并进行相应处理；

在拖拽结束时获取拖拽数据，通常是拖拽元素的 id 值，然后可以对该数据进行相应的处理，如在放置区域创建一个新的元素，并把拖拽数据传递给该元素。

示例一：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JS拖拽插件示例一</title>
    <style>
      #drag-elem {
        width: 100px;
        height: 100px;
        background-color: red;
        color: #fff;
        text-align: center;
        line-height: 100px;
        cursor: move;
      }

      #drop-elem {
        width: 200px;
        height: 200px;
        background-color: #ccc;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div id="drag-elem" draggable="true">拖拽元素</div>
    <div id="drop-elem" dropzone="copy">放置区域</div>

    <script>
      document.getElementById('drag-elem').addEventListener('dragstart', function(e) {
        e.dataTransfer.setData('text', e.target.id);
      });

      document.getElementById('drop-elem').addEventListener('drop', function(e) {
        e.preventDefault();
        var data = e.dataTransfer.getData('text');
        var clone = document.createElement('div');
        clone.innerHTML = document.getElementById(data).innerHTML;
        e.target.appendChild(clone);
      });

      document.getElementById('drop-elem').addEventListener('dragover', function(e) {
        e.preventDefault();
      });
    </script>
  </body>
</html>

示例二：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JS拖拽插件示例二</title>
    <style>
      .drag-elem {
        width: 100px;
        height: 100px;
        background-color: red;
        color: #fff;
        text-align: center;
        line-height: 100px;
        margin-right: 10px;
        cursor: move;
      }

      .drop-elem {
        display: flex;
        flex-wrap: wrap;
        width: 500px;
        height: 200px;
        background-color: #ccc;
        margin-top: 20px;
        padding: 10px;
      }

      .new-elem {
        width: 100px;
        height: 100px;
        background-color: blue;
        color: #fff;
        text-align: center;
        line-height: 100px;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <div class="drag-elem" draggable="true">拖拽元素一</div>
    <div class="drag-elem" draggable="true">拖拽元素二</div>
    <div class="drag-elem" draggable="true">拖拽元素三</div>
    <div class="drag-elem" draggable="true">拖拽元素四</div>
    <div class="drag-elem" draggable="true">拖拽元素五</div>

    <div class="drop-elem" dropzone="copy">放置区域</div>

    <script>
      var dragElems = document.querySelectorAll('.drag-elem');
      var dropElem = document.querySelector('.drop-elem');

      [].forEach.call(dragElems, function(elem) {
        elem.addEventListener('dragstart', function(e) {
          e.dataTransfer.setData('text', e.target.outerHTML);
        });
      });

      dropElem.addEventListener('drop', function(e) {
        e.preventDefault();
        var data = e.dataTransfer.getData('text');
        var clone = document.createElement('div');
        clone.classList.add('new-elem');
        clone.innerHTML = data;
        e.target.appendChild(clone);
      });

      dropElem.addEventListener('dragover', function(e) {
        e.preventDefault();
      });
    </script>
  </body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS拖拽插件实现步骤 - Python技术站

相关文章