Html5 drag&drop

下面是一个拖放例子

定义如下的两个div，分别是用于拖放后放置新元素的容器和可拖动的元素；

<body>
    <div id="holder" style=" 200px; height: 200px; background: #ff4400;" ondrop="drop(event);"
         ondragover="dragover(event);"></div>
    <div id="module" style=" 100px; height: 100px; background: #f0abcd;" draggable="true"
         ondragstart="dragstart(event);"></div>
</body>

定义Javascript方法，用于处理拖放事件；

<script> function dragstart(evt) { evt.dataTransfer.setData('targetId', evt.target.id); } function drop(evt) { evt.preventDefault(); var data = evt.dataTransfer.getData("targetId"); evt.target.appendChild(document.getElementById(data)); } function dragover(evt) { evt.preventDefault(); } </script>

分析：

draggable="true"; // 设置元素可拖动;
ondragstart&setData; // 在ondragstart回调方法中调用setData来设置被拖动数据的值，如果不调用setData，则拖动事件不会继续传递下去；
ondragover; // 该事件规定在何处旋转被拖动的数据，默认无法将数据/元素旋转到其它元素中，如果要设置成允许旋转，必须阻止对元素的默认处理方式；
ondrap; // 当放置被拖放数据时，会触发ondrop回调事件，在ondrop中对拖放进行处理;

Step

调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("targetId") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("module1")
把被拖元素追加到放置元素（目标元素）中

浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注：在 Safari 5.1.2 中不支持拖放。

ref: http://www.w3school.com.cn/html5/html_5_draganddrop.asp