HTML5 拖放（Drag 和 Drop）

定义：

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

1. 说说“拖放事件”

拖放事件，即抓取对象以后拖动到另一个位置

有些事件在被拖放的元素上触发，有些在放置目标上触发。在拖动元素时，依次触发dragstart事件、drag事件、dragend事件；当某个元素被拖动到一个有效的放置目标上时，依次触发dragenter事件、dragover事件dragleave或者drop事件。

2. 实现过程

设置元素为可拖放

拖动什么？当元素被拖动时，发生的事件（ondragstart和setData()）

ondragstart属性调用一个函数，drag(event)规定看被拖动的数据，dataTransfer.setData()设置被拖放数据的数据类型和值。

function drag(ev){

ev.dataTransfer.setData("Text",ev.target.id);

}

放在何处？ondragover 事件规定在何处放置被拖动的数据
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，必须阻止对元素的默认处理方式。因此需要通过ondragover事件中的event.preventDefault()方法

event.preventDefault()

进行放置ondrop
首先调用preventDefault()来避免浏览器对数据的默认处理；然后通过dataTransfer.getData(“Text”)方法获得被拖数据，被拖数据是被拖元素的id;最后把被拖元素追加到放置元素中。

function drop(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

拖放(Drag 和 Drop)各属性生命周期

刚才大家已经看到了一些新鲜属性名词，如 ondragstart。或许还是很陌生，不知其所以，下面看一张表格或许能豁然开朗：

拖动生命周期 属性 值 描述

拖动开始 ondragstart script 在拖动操作开始时执行脚本（对象是被拖拽元素）

拖动过程中 ondrag script 只要脚本在被拖动就允许脚本（对象是被拖拽元素）

拖动过程中 ondragenter script 当元素被拖动到一个合法的放置目标时，执行脚本（对象是目标元素）

拖动过程中 ondragover script 只要元素正在合法的放置目标上拖动时，就执行脚本（对象是目标元素）

拖动过程中 ondragleave script 当元素离开合法的放置目标时（对象是目标元素）

拖动结束 ondrop script 将被拖拽元素放在目标元素内时运行脚本（对象是目标元素）

拖动结束 ondragend script 在拖动操作结束时运行脚本（对象是被拖拽元素）