站長(zhǎng)資訊網(wǎng)通過(guò)使用HTML5的拖放功能我們可以拖放HTML頁(yè)面元素。在上一篇文章中，我們介紹了有關(guān)于可以拖放單個(gè)元素的代碼。在接下來(lái)的這篇文章中，我們將來(lái)介紹關(guān)于允許拖放多個(gè)元素的代碼。
話(huà)不多說(shuō)，我們直接看示例
示例一：使用UL標(biāo)記拖放多個(gè)元素
代碼如下：
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">鯨魚(yú)</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; }
說(shuō)明：
加載頁(yè)面時(shí)執(zhí)行加載功能。load函數(shù)中的以下代碼將dragover和drop事件分配給[Delete]的div。當(dāng)元素被拖動(dòng)到Delete框時(shí)，會(huì)調(diào)用onDragOver函數(shù)，當(dāng)它被刪除時(shí)，會(huì)調(diào)用onDrop函數(shù)。
var delbox = document.getElementById('del'); delbox.addEventListener('dragover', onDragOver, false); delbox.addEventListener('drop', onDrop, false);
調(diào)用querySelectorAll方法以獲取ul標(biāo)記中的li元素。for循環(huán)反復(fù)處理中獲取的元素?cái)?shù)組，并將每個(gè)元素的“draggable”屬性設(shè)置為true。此過(guò)程將其設(shè)置為可拖動(dòng)對(duì)象。它還分配了一個(gè)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); }
拖動(dòng)列表項(xiàng)時(shí)，將調(diào)用以下onDragStart函數(shù)。調(diào)用dataTransfer對(duì)象的setData方法以在dataTransfer對(duì)象中存儲(chǔ)元素的ID。
function onDragStart(e) { e.dataTransfer.effectAllowed = 'copy'; e.dataTransfer.setData('text', this.id); }
當(dāng)在拖放區(qū)域中拖動(dòng)列表中的項(xiàng)目時(shí)，將調(diào)用以下onDragOver函數(shù)。由于DragOver沒(méi)有特別的處理，因此它調(diào)用PreventDefault方法來(lái)取消事件。
function onDragOver(e) { e.preventDefault(); }
如果列表的項(xiàng)目在拖放區(qū)域內(nèi)被刪除，則可以調(diào)用onDrop函數(shù)。調(diào)用stopPropagation方法取消事件的處理。然后，我們從dataTransfer對(duì)象中獲取ID。通過(guò)取得ID，您可以獲得丟棄區(qū)域中丟棄的元素。調(diào)用getElementById方法并從ID中獲取LI標(biāo)記的對(duì)象。通過(guò)使用獲取的LI對(duì)象的paerntNode屬性訪(fǎng)問(wèn)父節(jié)點(diǎn)，調(diào)用removeChild方法，刪除被丟棄的列表的項(xiàng)目。
function onDrop(e) { if (e.stopPropagation) e.stopPropagation(); var eid = e.dataTransfer.getData('text'); var elem = document.getElementById(eid); elem.parentNode.removeChild(elem); }
運(yùn)行結(jié)果：
使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。
可以拖動(dòng)頁(yè)面底部列表中的項(xiàng)目。比如拖動(dòng)“企鵝”這一項(xiàng)，將其拖動(dòng)到刪除區(qū)域，然后下面列表項(xiàng)中就沒(méi)有第三項(xiàng)“企鵝”了，具體效果如下圖所示
拖動(dòng)其他項(xiàng)都是一樣的效果，五項(xiàng)都可以刪除。
