h5拖放

拖放：抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
1、设置元素为可拖放
draggable="true"
2、拖动的元素 ondragstart和setData()
dataTransfer.setData()方法设置被拖数据的数据类型和值。
3、拖到什么地方
ondragover时间规定在何处放置拖动的数据。默认无法将数据或者元素放入到其他元素中，如果需要设置允许放置，那就需要阻止对元素的默认处理方式
event.preventDefault()
4、进行放置
ondrop
调用preventDefault()来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过dataTransfer.getData("Text")方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

<style>
.wrap{width: 400px; height: 400px; border: 1px solid #f90;
        float: left;}
</style>
<div id="wrap1" class="wrap" ondragover="allowDrop(event)" ondrop="drop(event)">
    <img src="images/0.jpg" width="300" alt="" id="dragImg" draggable="true" ondragstart="drag(event)" />
</div>
<div id="wrap2" class="wrap" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<script>
    function allowDrop(ev) {
        ev.preventDefault();
    }
    function drag(ev) {
        ev.dataTransfer.setData("Img", ev.target.id);
    }
    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Img");
        ev.target.appendChild(document.getElementById(data));
    }
</script>