HTML5拖拽

標籤：事件觸發   var   start   位置   nsf   code   lis   div   20px   

被拖拽元素有關的事件

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 {        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拖拽