HTML5 拖拽

总结：①被拖拽和放置拖拽内容的容器都需要id；②被拖拽内容设置draggable=“true”，ondragstart=”dragStart(event)”记录拖拽。③容器需要ondragover=“allowDrag(event)”ondrop=”drop(event)”。

HTML

<div id="dragTxt" draggable="true" ondragstart="dragStart(event)">拖拽我啊</div><div id="dropBox" ondragover="allowDrag(event)" ondrop="drop(event)">放置拖拽内容容器</div>

JS


function allowDrag(ev){
ev.preventDefault();
}
function dragStart(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault;
}