1.前言：在html5中，如果想拖拽元素，就必須為元素新增 draggable="true"屬性，圖片和超連結不用新增該屬性，預設是可以被拖拽的。

2.拖拽事件

1）被拖拽元素事件

    ondrag:  整個拖拽過程都會呼叫—持續觸發

    ondragstart: 拖拽開始時呼叫

    ondragleave: 滑鼠離開拖拽元素時呼叫

    ondragend:  拖拽結束時呼叫

2）目標元素事件

    ondragenter:  當拖拽元素進入時呼叫

    ondragover: 當停留在目標元素上時呼叫

    ondrop:  當在目標元素上鬆開滑鼠時呼叫、

    ondragleave:  當滑鼠離開目標元素時呼叫

說明：瀏覽器會預設阻止ondrop事件，因此必須在ondragover中阻止瀏覽器的預設行為 e.preventDefault()

3. 使用

在實際中，一般通過事件源捕獲的方式來獲取當前被拖拽的子元素

1） 在ondragover中阻止瀏覽器預設行為

document.ondragover = function(e) {

        e.preventDefault();

    }

2）再在ondragstart中賦值

    document.ondragstart = function(e) {

        e.dataTransfer.setData("text/html", e.target.id);     //e.target可獲取被拖拽的元素

    }

3）在ondrop中追加被拖拽的元素

    document.ondrop= function(e) {

        var id = e.dataTransfer.getData("text/html");

        e.target.appendChild(document.getElementById(id));     //追加到目標元素中

    }