HTML5拖拽

被拖拽元素有关的事件

dragstart: 当拖拽元素被拖动离开原位置触发。
dragend: 档松开鼠标，停止拖拽时触发。

目标元素有关事件

dragenter: 拖拽元素进入目标元素区域触发。
dragover：拖拽元素在目标元素上移动触发。
drop：拖拽元素在目标元素上松开鼠标停止拖拽时触发。

P.S.想要触发drop事件，必须要取消dropover的默认事件（event.preventDefault()）

我们dataTransfer来保存被拖拽元素的一些信息。

event.target.dataTransfer.setData(key, value); 通过setData()方法来保存被拖拽元素中我们需要的信息 。
event.target.dataTransfer.getData(key, value); 通过getData()方法来读取被拖拽元素中我们保存的信息。
基本我们是在dragstart事件处理函数中处理保存event.target的一些信息，然后在其他事件触发时，获取所需信息来完成我们需要实现的功能。

一个小DEMO（实现信息列表的拖动位置互换和垃圾箱回收）

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

    #trash-box {
         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();