html5的drag属性实现拖放

70. html5的drag属性实现拖放

拖放（Drag 和 Drop）是很常见的特性。它指的是您抓取某物并拖入不同的位置。

拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。

下面我们通过一个例子来实现拖放

<div id="drop" ondrop="drop(event)" ondragover="allowDrag(event)"></div>
<div id="drag"  ondragstart="drag(event)" draggable="true"> 可拖放文字 </div>

在上述示例中，我们给拖拽元素 drag 标签添加了 draggable="true" 属性以及 ondragstart 事件处理函数，给目标元素 drop 标签添加了 ondragover 和 ondrop 事件处理函数。

1. ondragstart 事件处理函数会在拖拽元素开始拖拽时被调用，可以在其中设置传输的数据类型和值，例如：

function drag(e){
  e.dataTransfer.setData("id", e.target.id)
}

2. ondragover 事件处理函数会在拖拽元素悬停在目标元素上时被调用，可以在其中设置允许拖放的操作类型，例如：

function allowDrag(e){
  e.preventDefault()
}

3. ondrop 事件处理函数会在拖拽元素在目标元素上松开鼠标时被调用，可以在其中获取传输的数据，例如：

function drop(e) {
  e.preventDefault()
  const data = e.dataTransfer.getData("id")
  e.target.appendChild(document.getElementById(data))
}

需要注意的是，为了防止默认的事件行为（例如在拖拽元素上松开鼠标时跳转到链接地址），我们需要在 ondragover 和 ondrop 事件处理函数中调用 preventDefault 方法。