HTML5 拖放学习笔记

HTML5的拖放（Drag and Drop） API 是一种实现可拖动元素的交互方式的技术。在HTML5中，我们可以使用拖放来实现元素的拖动、排序、删除等操作。在本文档中，我们将介绍HTML5拖放API的使用方法和示例。

基本使用

在HTML5中，拖放功能由drag事件和drop事件组成。要实现拖放功能，我们需要以下步骤：

选择要拖动的元素
发送dragstart事件
在drop目标上发送dragenter和dragover事件
在drop目标上发送drop事件
发送dragend事件

下面是一个基本的拖放示例：

htmlCopy Code
<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 拖放示例</title>
    <style>
      #div1 {
        width: 100px;
        height: 100px;
        background-color: #f00;
      }
    </style>
    <script>
      function allowDrop(ev) {
        ev.preventDefault();
      }

      function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
      }

      function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
      }
    </script>
  </head>
  <body>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <img id="drag1" src="image.jpg" draggable="true" ondragstart="drag(event)" width="50" height="50">
  </body>
</html>

在该示例中，我们将图片drag1设为可拖动，并在其上添加了drag事件，当拖动drag1时，发送dragstart事件。同时，在目标div上添加了drop事件。当拖动图片进入div时，发送dragenter和dragover事件。当释放鼠标时，发送drop事件将图片添加到目标div中。

拖放实例

下面是一个更完整的拖放示例，它展示了如何使用HTML5拖放API来实现列表项的拖动和排序功能。

htmlCopy Code
<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 拖放示例</title>
    <style>
      #container {
        display: flex;
        flex-direction: row;
      }

      .item {
        width: 30%;
        margin-right: 10px;
        padding: 5px;
        background-color: #f0f0f0;
        text-align: center;
        font-size: 20px;
        cursor: move;
      }

      .item:hover {
        background-color: #e0e0e0;
      }
    </style>
    <script>
      var dragged;

      /* 事件处理程序 */

      function handleDragStart(e) {
        dragged = e.target;
        e.dataTransfer.effectAllowed = 'move';
      }

      function handleDragOver(e) {
        if (e.preventDefault) {
          e.preventDefault();
        }

        e.dataTransfer.dropEffect = 'move';

        return false;
      }

      function handleDrop(e) {
        if (e.stopPropagation) {
          e.stopPropagation();
        }

        if (dragged != e.target) {
          dragged.parentNode.removeChild(dragged);
          e.target.parentNode.insertBefore(dragged, e.target.nextSibling);
        }

        return false;
      }

      /* 事件监听 */

      var items = document.querySelectorAll('.item');
      [].forEach.call(items, function (item) {
        item.addEventListener('dragstart', handleDragStart, false);
        item.addEventListener('dragover', handleDragOver, false);
        item.addEventListener('drop', handleDrop, false);
      });
    </script>
  </head>
  <body>
    <div id="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  </body>
</html>

在该示例中，我们使用了flex布局来排列列表项，然后将每个列表项设为可拖动。当拖动列表项时，发送dragstart事件并设置拖动类型。在目标列表项上，发送dragover事件，并设置dropEffect属性。当释放鼠标时，发送drop事件，将被拖动的列表项插入到目标位置。

以上是HTML5拖放API的基本使用和示例。希望对你理解和掌握HTML5拖放技术有所帮助。