HTML學習--拖放API實現拖放排序
摘抄至:https://www.cnblogs.com/linxin/p/6794542.html
前言
HTML5中提供了直接拖放的API,極大的方便我們實現拖放效果,不需要寫一大堆的js,只需要通過監聽元素的拖放事件就能實現各種拖放功能。
想要拖放某些元素,必須設定該元素的 draggable 的屬性為 true ,當該屬性為 false 時,將不允許拖放。而 img 元素和 a 元素都預設設定了 draggable 屬性為 true,可直接拖放,如果不想拖放這兩個元素,就把屬性設為 false 即可。
拖放事件
拖放事件由不同的元素產生。一個元素被拖放,他可能會經過很多元素上,最終到達想要放置的元素內。這裡,我們暫時把被拖放的元素稱為源物件,被經過的元素稱為過程物件,到達的元素我們稱為目標物件。不同的物件產生不同的拖放事件。
源物件:
- dragstart: 源物件開始拖放
- drag : 源物件拖放過程中
- dragend : 源物件拖放結束
過程物件:
- dragenter:源物件開始進入過程物件範圍內。
- dragover:源物件在過程物件範圍內移動。
- dragleave:源物件離開過程物件的範圍。
目標物件:
- drop:源物件被拖放到目標物件內。
<div id="source" draggable="true">a元素</div> <div id="process">b元素</div> <div id="target">c元素</div> <script> var source = document.getElementById('source'); // a 元素 var process = document.getElementById('process'); // b 元素 var target = document。getElementById('target'); // c 元素 source.addEventListener('dragstart', function(ev){ console.log('a元素開始被拖動'); }, false) process.addEventListener('dragenter', function(ev){ console.log('a元素開始進入b元素'); }, false) process.addEventListener('dragleave', function(ev){ console.log('a元素離開b元素'); }, false) target.addEventListener('drop', function(ev){ console.log('a元素被拖放到c元素'); ev.preventDefault(); }, false) document.ondragover = function(e){e.preventDefault();} </script>
dataTransfer 物件
在所有拖放事件中提供了一個數據傳遞物件 dataTransfer ,用於在源物件和目標物件間傳遞資料。接下來認識一下這個物件的方法和屬性,來了解它是如何傳遞資料的。
setData()
該方法向 dataTransfer 物件中存入資料。接收兩個引數,第一個表示要存入資料種類的字串,現在支援有以下幾種:
- text/plain:文字文字。
- text/html:HTML文字。
- test/xml:XML文字。
- text/uri-list:URL列表,每個URL為一行。
第二個引數為要存入的資料。例如:
event.dataTransfer.setData('text/plain','Hello World');
getData()
該方法從 dataTransfer 物件中讀取資料。引數為在 setData 中指定的資料種類。例如:
event.dataTransfer.getData('text/plain');
clearData()
該方法清除 dataTransfer 物件中存放的資料。引數可選,為資料種類。若引數為空,則清除所有種類的資料。例如:
event.dataTransfer.clearData();
setDragImage()
該方法通過用 img 元素來設定拖放圖示。接收三個引數,第一個為圖示元素,第二個為圖示元素裡滑鼠指標的X軸位移量,第三個為圖示元素離滑鼠指標的Y軸位移量。例如:
var source = document.getElementById('source'),
icon = document.createElement('img');
icon.src = 'img.png';
source.addEventListener('dragstart', function(ev){
ev.dataTransfer.setDragImage(icon, -10, -10)
}, false)
effectAllowed 和 dropEffect 屬性
這兩個屬性結合起來設定拖放的視覺效果。
值得注意的是:IE 不支援 dataTransfer 物件。
實現拖放排序
上面已經熟悉了拖放 API 使用,我們來實現個簡單的拖放排序,這也是在專案中比較常見的。先來理一下思路:
- 在一個列表中,每一個元素都可以被拖放,那首先要給每個元素設定 draggable 屬性為 true。
- 監聽每一個元素的 dragstart 事件,對源物件走樣式處理區分。
- 監聽每一個元素的 dragenter 事件,當源物件進入到當前元素裡,就把源物件新增到該元素之前。這樣子後面的元素就會被源物件擠下去,實現排序的效果。
- 但是會發現,源物件無法排到最後一個,只能咋倒數第二個。這是就要監聽 dragleave 事件,當過程物件是最後一個元素時,源物件離開了過程物件,這時就把源物件新增到最後一個。
主要程式碼如下:
var source = document.querySelectorAll('.list'); dragElement = null; for(var i = 0; i < source.length; i++){ source[i].addEventListener('dragstart', function(ev){ dragElement = this; }, false); source[i].addeventListener('dragenter', function(ev){ if(dragElement != this){ this.parentNode.insertBefore(dragElement, this); } }, false) source[i].addEventListener('dragleave', function(ev){ if(dragElement != this){ if(this == this.parentNode.lastElementChild || this == this.parentNode.lastChild){ this.parentNode.appendChild(dragElement); } } }, false) }; documnet.ondragover = function(e){e.prevenDefault();} documnet.ondrop = function(e){e.prevenDefault();}