HTML 拖放功能 - Drag&Drop

一、HTML 拖放基础

HTML 拖放（Drag and Drop）接口使应用程序能够在浏览器中使用拖放功能。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。

1. 如何让一个元素可拖拽

让一个元素可被拖拽需要添加 draggable 属性，值为true。

<p id="p1" draggable="true">This element is draggable.</p>

const element = document.getElementById("p1");
element.addEventListener("dragstart", (event)=>{
   
    event.dataTransfer.setData("text/plain", '我是一条拖拽数据');
});

2. 定义拖拽数据

每个 drag event 都有一个dataTransfer 属性，其中保存着拖拽事件的数据。这个属性（DataTransfer 对象）也有管理拖拽数据的方法。setData() 方法为拖拽数据添加一个项

element.addEventListener("dragstart", (event)=>{
   
  // 添加拖拽数据
  ev.dataTransfer.setData("text/plain", ev.target.innerText);
  ev.dataTransfer.setData("text/html", ev.target.outerHTML);
  ev.dataTransfer.setData("text/uri-list", ev.target.ownerDocument.location.href);
});

3. 定义拖拽图像

拖动过程中，从拖动目标(dragstart)事件触发的元素生成半透明图像，并在拖动过程中跟随鼠标指针一起移动。可通过DataTransfer.setDragImage自定义拖拽图像。

element.addEventListener("dragstart", (event)=>{
   
 	var img = new Image();
  	img.src = 'example.gif'; // 记得替换成真实路径
  	event.dataTransfer.setDragImage(img, 10, 10);
});