HTML5 - 拖放

HTML5 - 拖放（Drag and Drop）API

HTML 拖放（Drag and Drop，简称 DnD）API 提供了原生浏览器支持，用于拖动元素（例如图像、链接、文件或任何 HTML 元素）并将它们放置到网页中指定的放置目标区域，甚至可以在不同应用程序之间进行（例如将文件从桌面拖到浏览器中）。

这为重新排序列表、上传文件、在容器之间移动项目或创建可视化编辑器等任务提供了直观的用户界面。

在 HTML5 之前，实现拖放需要复杂的 JavaScript 逻辑或依赖外部库。原生 API 大大简化了这一过程。

DnD API 在所有现代桌面浏览器中都得到良好支持。移动端支持可能一致性较差，或者需要不同的交互模式（例如触摸事件）。

核心概念

• 可拖动元素 (Draggable Element): 用户点击并拖动的元素。要使一个元素可拖动，将其 draggable 属性设置为 true。
• 放置目标 (Drop Target): 可拖动元素可以被放置到的元素。
• 数据传输 (Data Transfer): 在拖动操作期间，需要传输关于被拖动元素的信息（例如其 ID、类型或关联数据）。这由 DataTransfer 对象管理。
• 拖动事件 (Drag Events): 在拖放生命周期中，一系列事件会在可拖动元素和潜在的放置目标上触发。

拖放事件

这些事件允许你控制拖动过程并提供视觉反馈：

可拖动元素上的事件

事件 (Event)	描述 (Description)
dragstart	用户开始拖动元素时触发。对于使用 DataTransfer 对象设置拖动数据和允许的效果至关重要。
drag	元素被拖动时重复触发。
dragend	拖动操作结束时触发（无论是成功放置、取消还是放置到无效目标上）。用于清理工作。

放置目标元素上的事件

事件 (Event)	描述 (Description)
dragenter	当拖动项首次进入放置目标的边界时触发。用于提供视觉反馈（例如高亮显示）。
dragover	当拖动项在放置目标上方移动时重复触发。至关重要的是，你必须在 dragover 事件处理程序中调用 event.preventDefault() 来表明此处允许放置。 否则，默认情况下放置会被阻止。
dragleave	当拖动项离开放置目标的边界时触发。用于移除视觉反馈。
drop	当拖动项在放置目标上方释放时触发。在这里处理实际的放置逻辑：从 DataTransfer 检索数据并执行操作（例如移动元素、处理文件）。

DataTransfer 对象

所有拖动事件对象都有一个 dataTransfer 属性，该属性保存被拖动的数据并控制拖动反馈。

dataTransfer 的主要方法和属性：

方法/属性 (Method/Property)	描述 (Description)
dataTransfer.setData(format, data)	为指定格式（例如 text/plain、text/uri-list、自定义格式）设置拖动数据。在 dragstart 事件处理程序中调用。
dataTransfer.getData(format)	检索指定格式的拖动数据。在 drop 事件处理程序中调用。
dataTransfer.clearData([format])	移除指定格式或所有格式的数据。
dataTransfer.effectAllowed	设置源元素允许的拖动操作类型（例如 copy、move、link、copyMove）。在 dragstart 中设置。
dataTransfer.dropEffect	设置在 dragenter 和 dragover 期间所需的放置效果反馈（光标样式）（例如 copy、move、link、none）。必须与 effectAllowed 兼容。
dataTransfer.setDragImage(element, xOffset, yOffset)	设置一个自定义图像，在拖动期间显示在指针旁边（代替默认的半透明元素）。
dataTransfer.files	一个 FileList 对象，包含从操作系统拖动到浏览器的文件。
dataTransfer.types	在 dragstart 期间设置的数据格式的只读列表。

拖放流程示例

让我们创建一个简单的示例，其中一个可拖动项可以被移动到一个放置区域。

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Drag and Drop Example</title>
  <style>
    #draggableItem {
      width: 100px;
      height: 100px;
      background-color: lightcoral;
      border: 1px solid black;
      margin-bottom: 10px;
      cursor: move;
      text-align: center;
      line-height: 100px;
      user-select: none; /* Prevent text selection during drag */
    }
    #dropZone {
      width: 200px;
      height: 200px;
      border: 2px dashed blue;
      padding: 10px;
      background-color: lightblue;
    }
    #dropZone.drag-over {
        border-style: solid;
        background-color: lightgreen;
    }
  </style>
</head>
<body>

  <h2>Drag the red box into the blue area:</h2>

  <div id="draggableItem" draggable="true">
    Drag Me!
  </div>

  <div id="dropZone">
    Drop Zone
  </div>

  <script>
    const draggableItem = document.getElementById('draggableItem');
    const dropZone = document.getElementById('dropZone');

    // --- Events on Draggable Item ---

    draggableItem.addEventListener('dragstart', (event) => {
      console.log('Drag Start');
      // Set data to transfer (e.g., the element's ID)
      event.dataTransfer.setData('text/plain', event.target.id);
      // Specify allowed effect
      event.dataTransfer.effectAllowed = 'move';
      // Optional: Add a visual cue (slight transparency)
      event.target.style.opacity = '0.5';
    });

    draggableItem.addEventListener('dragend', (event) => {
        console.log('Drag End');
        // Reset opacity after drag finishes
        event.target.style.opacity = '1';
    });

    // --- Events on Drop Zone ---

    dropZone.addEventListener('dragenter', (event) => {
        console.log('Drag Enter Drop Zone');
        // Prevent default to allow drop (though dragover is primary)
        event.preventDefault();
        // Add visual feedback
        dropZone.classList.add('drag-over');
    });

    dropZone.addEventListener('dragover', (event) => {
        // *** CRITICAL: Prevent default to allow dropping ***
        event.preventDefault();
        // Set the drop effect (visual feedback for the cursor)
        event.dataTransfer.dropEffect = 'move';
        // console.log('Drag Over Drop Zone'); // Can be very noisy
    });

    dropZone.addEventListener('dragleave', (event) => {
        console.log('Drag Leave Drop Zone');
        // Remove visual feedback
        dropZone.classList.remove('drag-over');
    });

    dropZone.addEventListener('drop', (event) => {
        console.log('Drop Event');
        // Prevent default browser behavior (e.g., opening link)
        event.preventDefault();
        // Remove visual feedback
        dropZone.classList.remove('drag-over');

        // Get the data that was set in dragstart (the element's ID)
        const id = event.dataTransfer.getData('text/plain');
        const draggedElement = document.getElementById(id);

        // Check if the element exists and isn't already in the drop zone
        if (draggedElement && event.target === dropZone) {
            console.log(`Appending element with ID: ${id}`);
            // Append the dragged element to the drop zone
            dropZone.appendChild(draggedElement);
        } else {
            console.log('Drop target is not the zone itself or element not found.');
        }
    });

  </script>

</body>
</html>

解释：

• draggable="true" 使红色方框变得可拖动。
• dragstart：我们使用 setData('text/plain', id) 存储被拖动项的 ID。
• dragover：我们必须调用 event.preventDefault() 来表明此元素接受放置。
• dragenter/dragleave：我们添加/移除 CSS 类以提供视觉反馈。
• drop：我们再次调用 event.preventDefault()，使用 getData('text/plain') 检索 ID，找到该元素，并将其附加到放置区域。

这个基础示例可以扩展，用于处理文件放置、重新排序列表中的项目以及更复杂的交互。