HTML5拖拽

來源:互聯網
上載者:User

標籤:事件觸發   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拖拽

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: