html5中拖放-html5的drag属性实现拖拽

70.html5的drag属性实现拖放

拖放是非常常见的功能。 它指的是当你抓住某物并将其推到不同的位置时。

拖动是 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风暴处理函数。

当拖放元素开始被拖放时，ondragstart风暴处理函数将会被调用。 可以在里面设置要传输的数据类型和值html5中拖放，如：

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

当拖放元素悬停在目标元素上时，将调用 ondragover 风暴处理函数。 您可以设置允许拖动的操作类型，例如：

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

当拖拽元素按住键盘在目标元素上时html5中拖放，会调用ondrop风暴处理函数，可以获取传输的数据，如：

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

需要注意的是，为了避免默认的风暴行为（例如在拖放元素上按住键盘时跳转到链接地址），我们需要在ondragover和ondrop风暴处理函数中调用preventDefault方法。