HTML5拖放的基本使用（4步）

一、設置元素爲可拖放

<img draggable="true">

二、拖動什麼- ondragstart 和 setData()

拖動什麼，就給什麼綁定拖動開始的事件（ondragstart）和設置拖動的數據(setData)

<img draggable="true" ondragstrat="drag(event)">

<script>
    function drag(ev){
        // 設置拖放的數據，把目標的id賦值給 "Text"
        ev.dataTransfer.setData("Text",ev.target.id)
    }
</script>

三、放到何處 - ondragover

默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。

<img draggable="true" ondragstrat="drag(event)">
<div id="div1"  ondragover="allowDrop(event)"></div>
<script>
    function drag(ev){
        // 設置拖放的數據，把目標的id賦值給 "Text"
        ev.dataTransfer.setData("Text",ev.target.id)
    }
    //設置元素可被放置
    function allowDrop(ev)
    {
        ev.preventDefault();
    }
</script>

四、進行放置 - ondrop

事件綁定在需要放置的元素上。

通過 dataTransfer.getData("Text") 方法獲得被拖的數據。該方法將返回在 setData() 方法中設置爲相同類型的任何數據。

<img id="drag1" src="xxx" draggable="true" ondragstrat="drag(event)">
<div id="div1"  ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<script>
    function drag(ev){
        // 設置拖放的數據，把目標的id賦值給 "Text"
        ev.dataTransfer.setData("Text",ev.target.id)
    }
    //設置元素可被放置
    function allowDrop(ev)
    {
        ev.preventDefault();
    }
    //進行放置
    function drop(ev)
    {
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }

</script>

如果需要在兩個元素中來回拖放，按照思路，給這兩個元素設置爲可放置即可。