<!DOCTYPE HTML><html><head><meta charset="utf-8"><title></title><style>.droptarget { ???float: left; ????width: 100px; ????height: 35px; ???margin: 15px; ???padding: 10px; ???border: 1px solid #aaaaaa;}</style></head><body><p>在两个矩形框中来回拖动 p 元素:</p><div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"><p ondragstart="dragStart(event)" draggable="true" id="dragtarget">拖动我!</p></div><div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div><p style="clear:both;" id="demo"></p><script>//开始拖动时，获取拖动对象的IDfunction dragStart(event) { ???event.dataTransfer.setData("Text", event.target.id); ???document.getElementById("demo").innerHTML = "开始拖动 p 元素";}//当拖动对象在目标容器内拖动时触发function allowDrop(event) { ???event.preventDefault();}//当释放鼠标键时function drop(event) { ???event.preventDefault();//阻止事件默认行为 ???var data = event.dataTransfer.getData("Text");//得到拖动对象的ID ???event.target.appendChild(document.getElementById(data));//将拖动对象添加到目标节点下 ???document.getElementById("demo").innerHTML = " p 元素已被拖动";}</script></body></html>
HTML5拖拽
原文地址：http://www.cnblogs.com/chenyongyang/p/7709782.html