HTML5拖放

示例说明： 1，要使元素可拖动，请将该draggable属性设置为true：

2，要拖动什么，ondragstart和setData()：指定拖动元素时应该发生的事情。在上面的示例中，该ondragstart属性调用一个函数drag(event)，该函数指定要拖动的数据。dataTransfer.setData()方法设置数据类型和拖动数据的值：

function drag(ev) {
   ev.dataTransfer.setData("text", ev.target.id);
}

3，在这种情况下，数据类型是“text”，值是可拖动元素的id（“drag1”）。 3，要拖到哪里 - ondragover： ondragover事件指定可以删除拖动数据的位置。默认情况下，不能在其他元素中删除数据/元素。要允许删除，我们必须阻止元素的默认处理。这是通过调用event.preventDefault() ondragover事件的方法来完成的：
event.preventDefault()
4，删除拖动的数据时，会发生丢弃事件。在上面的例子中，ondrop属性调用一个函数drop(event)：

function drop(ev) {
       ev.preventDefault();
       var data = ev.dataTransfer.getData("text");
       ev.target.appendChild(document.getElementById(data));
}

来回拖放的示例

    
    

    
    


拖放
在两个div元素中来回拖放这张图片

    

更多高级的教程