HTML5 拖放（Drag 和 Drop）——0711

1、什么是拖放？

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

2、如何实现拖放？

1、首先，设置被拖放元素的属性 draggable="true"，将该元素设置为可拖放。

2、拖动什么——ondragstart 和 setData()

给被拖放元素添加ondragstart 事件，并在事件中调用event.dataTransfer.setData() 方法，在元素被拖动时，获取被拖动元素的id，e.target.id。

3、放到何处——ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认情况下，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法。

4、进行放置——ondrop

当放置被拖数据时，会发生 drop 事件。

这里也要调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）；

通过 event.dataTransfer.getData() 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

最后，把被拖元素追加到放置元素（目标元素）中。

总结：
给被拖放元素设置属性 draggable="true"，并添加ondragstart事件（setData()）；
给放置元素（目标元素）添加ondragover事件和ondrop事件（getData()）。

3、拖放实例

将 box1 中的 img元素 拖放至 box2 中：

<div id="box1">
    <img draggable="true" ondragstart="drag(event)" id="img" src="./image/1.jpg" alt="#"/>
</div>
<div id="box2" ondragover="dragover(event)" ondrop="drop(event)"></div>

<script>
    function drag(e) {
        //setData
        e.dataTransfer.setData("ele", e.target.id);
        console.log(e.target);   //img元素
    }
    function dragover(e) {
        //阻止拖拽事件默认行为  默认情况下，无法将数据/元素放置到其他元素中
        e.preventDefault();
    }
    function drop(e) {
        //阻止拖拽事件默认行为  drop 事件的默认行为是以链接形式打开
        e.preventDefault();
        //getData
        var id = e.dataTransfer.getData("ele");
        e.target.appendChild(document.getElementById(id));
        console.log(e.target);  //box2元素
    }
</script>