1.被拖元素设置为可拖放
draggable="true"
<div class="drag" id="drag1" draggable="true" οndragstart="drag(event)">俺是drag</div>
2.规定当被拖元素被拖动时会发生的事情
οndragstart="drag(event)"
把目标元素的id存放到text里面
function drag(event){ event.dataTransfer.setData("Text",event.target.id); }
3.设置另一个元素可接受被拖动数据
event.preventDefault();
消除默认属性(不允许接收另一个元素)
4.当松开鼠标会发生的事件
function drop(event){ event.preventDefault();//消除默认(元素不可以接受另一个元素)属性 var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); }