透過使用HTML5的拖放功能我們可以拖放HTML頁面元素。在上一篇文章中，我們介紹了有關於可以拖放單一元素的程式碼。在接下來的這篇文章中，我們將介紹關於允許拖放多個元素的程式碼。
話不多說，我們直接看範例
#範例一：使用UL標記拖放多個元素
程式碼如下：
ListDragDrop.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="ListDragDrop.css"/>
<script>
function load() {
var delbox = document.getElementById('del');
delbox.addEventListener('dragover', onDragOver, false);
delbox.addEventListener('drop', onDrop, false);
var elems = document.querySelectorAll('ul#list1 > li');
for (var i = 0; i < elems.length; i++) {
el = elems[i];
el.setAttribute('draggable', 'true');
el.addEventListener('dragstart', onDragStart, false);
}
}
function onDragStart(e) {
e.dataTransfer.effectAllowed = 'copy';
e.dataTransfer.setData('text', this.id);
}
function onDragOver(e) {
e.preventDefault();
}
function onDrop(e) {
if (e.stopPropagation) e.stopPropagation();
var eid = e.dataTransfer.getData('text');
var elem = document.getElementById(eid);
elem.parentNode.removeChild(elem);
}
</script>
</head>
<body onload="load();">
<div id="del">删除</div>
<ul id="list1">
<li id="1">海豚</li>
<li id="2">鲸鱼</li>
<li id="3">企鹅</li>
<li id="4">北极熊</li>
<li id="5">雪狐</li>
</ul>
</ul>
</body>
</html>登入後複製
ListDragDrop.css
#del{
width:120px;
height:60px;
border: solid 2px #ff6a00;
}
ul#list1 > li {
display: block;
width: 150px;
border: 1px solid #808080;
}登入後複製
說明：
##在載入頁面時執行載入功能。 load函數中的以下程式碼將dragover和drop事件指派給[Delete]的div。當元素被拖曳到Delete框時，會呼叫onDragOver函數，當它被刪除時，會呼叫onDrop函數。
var delbox = document.getElementById('del');
delbox.addEventListener('dragover', onDragOver, false);
delbox.addEventListener('drop', onDrop, false);
登入後複製
呼叫querySelectorAll方法以取得ul標記中的li元素。 for循環重複處理中所取得的元素數組，並將每個元素的「draggable」屬性設為true。此過程將其設定為可拖曳物件。它還分配了一個dragstart事件。
var elems = document.querySelectorAll('ul#list1 > li');
for (var i = 0; i < elems.length; i++) {
el = elems[i];
el.setAttribute('draggable', 'true');
el.addEventListener('dragstart', onDragStart, false);
}登入後複製
拖曳清單項目時，將會呼叫下列onDragStart函數。呼叫dataTransfer物件的setData方法以在dataTransfer物件中儲存元素的ID。
function onDragStart(e) {
e.dataTransfer.effectAllowed = 'copy';
e.dataTransfer.setData('text', this.id);
}登入後複製
當在拖放區域中拖曳清單中的項目時，將會呼叫下列onDragOver函數。由於DragOver沒有特別的處理，因此它呼叫PreventDefault方法來取消事件。
function onDragOver(e) {
e.preventDefault();
}登入後複製
如果清單的項目在拖放區域內被刪除，則可以呼叫onDrop函數。呼叫stopPropagation方法取消事件的處理。然後，我們從dataTransfer物件中取得ID。透過取得ID，您可以獲得丟棄區域中丟棄的元素。呼叫getElementById方法並從ID中取得LI標記的物件。透過使用取得的LI物件的paerntNode屬性存取父節點，呼叫removeChild方法，刪除被丟棄的清單的項目。
function onDrop(e) {
if (e.stopPropagation) e.stopPropagation();
var eid = e.dataTransfer.getData('text');
var elem = document.getElementById(eid);
elem.parentNode.removeChild(elem);
}登入後複製
運行結果：
使用網頁瀏覽器顯示上述HTML檔案。將顯示如下所示的效果。
可以拖曳頁面底部清單中的項目。例如拖曳「企鵝」這一項，將其拖曳到刪除區域，然後下面清單項目中就沒有第三項「企鵝」了，具體效果如下圖所示
拖曳其他項目都是一樣的效果，五項都可以刪除。
以上是如何使用HTML5實作多個元素的拖放功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
