html5 拖放学习

html5拖放

需要有可拖放元素，可放置的位置（可多个），就像是一个苹果，多个箱子，苹果可以在箱子间来回放置，同样元素也可在多个可放置位置间来回拖放。

如果只有一个位置，元素只可被从原位置托放置唯一目标位置，且不能再被拖动。

------------------------------------------------------------------------------------------------

第一步，设置draggable 属性值为true,使元素可拖放

 <img draggable="true" />

 第二步，dataTransfer.setData() 方法获取可拖放元素（类型及id值），开始拖放：ondragstart 属性调用方法比如drag(event)，来执行拖动效果

<img src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" id="drag1" />

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);//该方法设置被拖数据的数据类型和值
}

第三步，通过调用ondragover 事件的 event.preventDefault() 方法，来使当前位置可放置；当放置被拖数据时，会发生 drop 事件，ondrop 属性调用了一个函数，drop(event)

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
function allowDrop(ev)
{
    ev.preventDefault();
}
function drop(ev)
{
    ev.preventDefault();//使当前位置可放置其它元素
    var data=ev.dataTransfer.getData("Text");//该方法将返回在 setData() 方法中设置为相同类型的任何数据。
    ev.target.appendChild(document.getElementById(data));//把被拖元素追加到放置元素（目标元素）中

12 }