HTML拖拽

• 高级

HTML拖拽API

概述 (20%)

• 设置元素draggable="true"
• 拖拽过程中，可以通过拖拽事件的event.dataTransfer进行数据通信
• 在数个监听器中放置逻辑
  • dragstart、dragend、dragleave
  • drop是用户把拖拽元素松手放到了某个元素上
  • dropover就是拖进某个元素（还没松手）
• 对于拖拽的具体逻辑，需要看具体需求了
  • use::禁用拖拽的默认事件
  • use::移动元素

详细实现 (80%)

基本概念

HTML拖拽操作涉及两个主要角色：

• 拖拽源（Drag Source）：被拖拽的元素
• 放置目标（Drop Target）：可以接收被拖拽元素的区域

实现步骤

1. 设置可拖拽元素

<div draggable="true" ondragstart="handleDragStart(event)">
  可拖拽的内容
</div>

2. 拖拽事件处理

function handleDragStart(event) {
  // 设置拖拽数据
  event.dataTransfer.setData('text/plain', event.target.textContent);
  event.dataTransfer.effectAllowed = 'move';
}

3. 设置放置目标

<div ondrop="handleDrop(event)" ondragover="handleDragOver(event)">
  放置区域
</div>

4. 放置事件处理

function handleDragOver(event) {
  event.preventDefault(); // 允许放置
}
 
function handleDrop(event) {
  event.preventDefault();
  const data = event.dataTransfer.getData('text/plain');
  // 处理放置逻辑
}

常见应用场景

• 列表拖拽排序
• 文件上传拖拽
• 看板式任务管理
• 图片排序和分类

相关链接

• related::业务