下面是一个拖放例子
定义如下的两个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