标签：
拖放：抓取对象以后拖到另一个位置。
在 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>
标签：
原文地址：http://www.cnblogs.com/wanbi/p/4312231.html
