拖拽交互：Draggable 属性及拖拽案例

本文介绍的是HTML5中关于draggable的一些属性以及相关的使用方法。

拖拽的生命周期

要掌握原生拖拽，首先要理解它涉及的两个主角和七个关键事件：

被拖拽元素 (Source)

这是你鼠标按住并移动的对象。

• dragstart: 拖拽开始时触发（最关键，用于传递数据）。
• drag: 拖拽过程中持续触发（类似 mousemove）。
• dragend: 拖拽结束时触发（无论成功与否）。
• 示例:开始拖拽一个元素

<div class="draggable" draggable="true">可拖拽元素</div>
 <div class="dropzone">Drop Zone 1</div>
 <div class="dropzone">Drop Zone 2</div>

let dragged = null;
  document.addEventListener('dragstart', (e) => {
    if (e.target?.nodeType === 1 && e.target.draggable) {
      dragged = e.target;
      console.log('触发dragstart');
    }
  });
 document.addEventListener('drag', (e) => {
      if (e.target?.nodeType === 1 && e.target.draggable) {
        dragged = e.target;
        console.log('触发drag');
      }
    });
  document.addEventListener('dragend', () => {
    dragged = null;
    console.log('触发dragend');
  });

放置目标 (Target)

这是你准备把元素扔进去的容器。

• dragenter: 被拖拽元素进入容器范围时触发。
• dragover: 被拖拽元素在容器上方悬停时持续触发（必须在此阻止默认行为）。
• dragleave: 被拖拽元素离开容器范围时触发。
• drop: 鼠标松开，元素被放置在容器中时触发。

示例：实现一个拖拽元素

拖拽要注意的事项:

1.添加 e.preventDefault() 阻止默认行为，
浏览器默认将拖拽行为视为「数据传输的安全操作」，比如：

1. 禁止普通元素被 “放下”（防止误操作）；
2. 拖拽链接 / 图片时，默认会打开链接 / 预览图片；
3. 拖拽进入 / 在元素上移动时，浏览器会给元素加 “禁止放下” 的鼠标样式
   通过e.preventDefault() 覆盖浏览器默认规则。

需要在dragover，drog事件中全局触发e.preventDefault()，因为浏览器会在拖拽过程中持续检查是否允许放下避免元素失效。比如在拖拽的是链接 / 图片，放下后会默认打开链接 / 在新标签页预览图片，会造成放置失效。