被拖拽元素有關的事件

dragstart: 當拖拽元素被拖動離開原位置觸發。
dragend: 檔松開鼠標，停止拖拽時觸發。

目標元素有關事件

dragenter: 拖拽元素進入目標元素區域觸發。
dragover：拖拽元素在目標元素上移動觸發。
drop：拖拽元素在目標元素上松開鼠標停止拖拽時觸發。

P.S.想要觸發drop事件，必須要取消dropover的默認事件（event.preventDefault()）

我們dataTransfer來保存被拖拽元素的一些信息。

event.target.dataTransfer.setData(key, value); 通過setData()方法來保存被拖拽元素中我們需要的信息 。

一個小DEMO（實現信息列表的拖動位置互換和垃圾箱回收）

 li {
        width: 200px;
        height: 40px;
        background-color: #ccc;
        margin: 20px;
        list
 
-style: none;
        display: block;
    }

    #trash-box {
        width: 300px;
        height: 200px;
        background-color: #000;
        color: #fff;
    }

 <ul>
        <li class="drag-item" draggable="true">列表項1</li>
        <li class="drag-item" draggable="true">列表項2</li>
        <li class="drag-item" draggable="true">列表項3</li>
        <li class="drag-item" draggable="true">列表項4</li>
        <li class="drag-item" draggable="true">列表項5</li>
    </ul>
    <div id="trash-box">刪除列表</div>

var li = document.getElementsByTagName(‘li‘),
            trashBox = document.getElementById(‘trash-box‘),
            len = li.length,
            ul = document.getElementsByTagName(‘ul‘)[0];

        function bindLiEvent () {
            // 給每個li綁定拖拽相關事件
            for(var i = 0; i < len; i++) {
                li[i].addEventListener(‘dragstart‘, function(e) {
                    var i = getIndex(li, this);

                    e.dataTransfer.setData("data",i);
                }, false);

                li[i].addEventListener(‘drop‘, function(e) {
                    var i = e.dataTransfer.getData("data");

                    console.log(i);

                    ul.insertBefore(li[i], this);
                }, false);

                li[i].addEventListener(‘dragover‘, function(e) {
                    e.preventDefault();
                }, false);
            }
        }

        // 獲取li的索引
        function getIndex(list, c) {
            for(var i = 0, len = list.length; i < len; i++) {
                if(list[i] === c) {
                    return i;
                }
            }
        }

        // 垃圾箱相關事件綁定
        function bindTrashEvent() {
            trashBox.addEventListener(‘drop‘, function(e) {
                var index = e.dataTransfer.getData("data");

                li[index].remove();
            },false);

            trashBox.addEventListener(‘dragover‘, function(e) {
                e.preventDefault();
            },false);
        }

        bindLiEvent();
        bindTrashEvent();

HTML5拖拽