站長(zhǎng)資訊網(wǎng)如何使用HTML5實(shí)現(xiàn)拖放單個(gè)元素？本篇文章將給大家介紹關(guān)于實(shí)現(xiàn)拖放HTML元素的JavaScript代碼，下面一起來(lái)看具體的實(shí)現(xiàn)內(nèi)容。
通過(guò)使用HTML5的拖放功能，您可以拖放HTML頁(yè)面元素
我們來(lái)看具體的示例
代碼如下
SimpleDragDrop.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="SimpleDragDrop.css" /> <script> function load() { var box = document.querySelector('.box'); box.addEventListener('dragstart', onDragStart, false); var zone = document.querySelector('.dropzone'); zone.addEventListener('dragover', onDragOver, false); zone.addEventListener('drop', onDrop, false); } function onDragStart(e) { e.dataTransfer.setData('text', this.id); } function onDragOver(e) { e.preventDefault(); this.textContent = 'onDragOver'; } function onDrop(e) { e.preventDefault(); this.textContent = 'onDrop'; } </script> </head> <body onload="load();"> <div class="box" draggable="true"></div> <div id="dropzone" class="dropzone"> </div> </body> </html>
SimpleDragDrop.css
.box { width:32px; height:32px; border:solid 1px #002f9f; } .dropzone { margin-top:16px; margin-bottom:16px; width: 280px; height: 64px; border: solid 1px #808080; }
說(shuō)明：
<div class="box" draggable="true"></div> <div id="dropzone" class="dropzone"></div>
頁(yè)面上顯示兩個(gè)上述的div，可以使用class =“box”，id =“dropzone”拖動(dòng)的對(duì)象是放置接受區(qū)域的div。對(duì)于可拖動(dòng)對(duì)象，可以將draggable =“true”設(shè)置為可拖動(dòng)對(duì)象。
function load() { var box = document.querySelector('.box'); box.addEventListener('dragstart', onDragStart, false); var zone = document.querySelector('.dropzone'); zone.addEventListener('dragover', onDragOver, false); zone.addEventListener('drop', onDrop, false); } function onDragStart(e) { e.dataTransfer.setData('text', this.id); } function onDragOver(e) { e.preventDefault(); this.textContent = 'onDragOver'; } function onDrop(e) { e.preventDefault(); this.textContent = 'onDrop'; }
上面的代碼為每個(gè)元素分配拖放事件。
對(duì)于要拖動(dòng)的元素，我們?cè)O(shè)置“dragstart”事件。啟動(dòng)拖動(dòng)時(shí)，將執(zhí)行onDragStart函數(shù)。
對(duì)于要?jiǎng)h除的元素，設(shè)置“dragover”“drop”事件。當(dāng)拖動(dòng)的元素進(jìn)入拖放區(qū)域，onDragOver功能被執(zhí)行，當(dāng)元件被丟棄onDrop功能將被執(zhí)行。
在dragstart的情況下，你必須編寫代碼來(lái)設(shè)置dataTransfer對(duì)象的值。它不使用插入dataTransfer中的值，但是如果沒(méi)有這個(gè)代碼的話，在沒(méi)有數(shù)據(jù)的情況下也會(huì)實(shí)現(xiàn)。
運(yùn)行結(jié)果
使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。
拖動(dòng)頂部的方框。如果將其拖動(dòng)到底部框架，框架中將顯示“onDragOver”。
將其放在框架中時(shí)，框架中會(huì)顯示“onDrop”字符。
示例2：添加了事件的拖放元素的方法
代碼如下
SimpleDragDrop2.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="SimpleDragDrop2.css" /> <script> function load() { var box = document.querySelector('.box'); box.addEventListener('dragstart', onDragStart, false); box.addEventListener('dragend', onDragEnd, false); var box = document.querySelector('.dropzone'); box.addEventListener('dragenter', onDragEnter, false); box.addEventListener('dragover', onDragOver, false); box.addEventListener('dragleave', onDragLeave, false); box.addEventListener('drop', onDrop, false); } function onDragStart(e) { e.dataTransfer.setData('Text', this.id); this.textContent = 'onDragStart'; } function onDragEnd(e) { this.textContent = 'onDragEnd'; } function onDragEnter(e) { this.textContent = 'onDragEnter'; } function onDragOver(e) { e.preventDefault(); this.textContent = 'onDragOver'; } function onDragLeave(e) { this.textContent = 'onDragLeave'; } function onDrop(e) { e.preventDefault(); this.textContent = 'onDrop'; } </script> </head> <body onload="load();"> <div id="box" class="box" draggable="true"></div> <div id="dropzone" class="dropzone"></div> </body> </html>
SimpleDragDrop.css
.box { width:32px; height:32px; border:solid 1px #d01313; } .dropzone { margin-top:16px; margin-bottom:16px; width: 280px; height: 64px; border: solid 1px #808080; }
說(shuō)明：
<div class="box" draggable="true"></div> <div id="dropzone" class="dropzone"></div>
如上例所示，頁(yè)面上顯示兩頁(yè)DIV。對(duì)于可拖動(dòng)對(duì)象，請(qǐng)將draggable =“true”設(shè)置為可拖動(dòng)對(duì)象。
function load() { var box = document.querySelector('.box'); box.addEventListener('dragstart', onDragStart, false); box.addEventListener('dragend', onDragEnd, false); var box = document.querySelector('.dropzone'); box.addEventListener('dragenter', onDragEnter, false); box.addEventListener('dragover', onDragOver, false); box.addEventListener('dragleave', onDragLeave, false); box.addEventListener('drop', onDrop, false); } function onDragStart(e) { e.dataTransfer.setData('Text', this.id); this.textContent = 'onDragStart'; } function onDragEnd(e) { this.textContent = 'onDragEnd'; } function onDragEnter(e) { this.textContent = 'onDragEnter'; } function onDragOver(e) { e.preventDefault(); this.textContent = 'onDragOver'; } function onDragLeave(e) { this.textContent = 'onDragLeave'; } function onDrop(e) { e.preventDefault(); this.textContent = 'onDrop'; }
上面的代碼為每個(gè)元素分配拖放事件。
“dragstart”和“dragend”事件被分配給拖動(dòng)側(cè)的元素。一旦開(kāi)始拖動(dòng)，調(diào)用ondstart函數(shù)，拖動(dòng)結(jié)束后，將被調(diào)用ondos agEs函數(shù)。
“dragenter”，“dragover”，“dragleave”和“drop”事件被分配給要拖動(dòng)的元素。當(dāng)拖動(dòng)的元素進(jìn)入拖放區(qū)域，執(zhí)行onDragEnter函數(shù)的功能，在拖拽區(qū)域內(nèi)拖動(dòng)的狀態(tài)下執(zhí)行onDragOver函數(shù)，從拖拽的區(qū)域出來(lái)的話，將執(zhí)行OnDragLeave函數(shù)。下拉拖動(dòng)的元素時(shí)，將執(zhí)行onDrop函數(shù)。
運(yùn)行結(jié)果
使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。
拖動(dòng)紅色區(qū)域的方形區(qū)域。字符“onDragStart”顯示在該區(qū)域中。
當(dāng)你松開(kāi)拖動(dòng)時(shí)，你會(huì)看到“onDragEnd”的角色紅框中的區(qū)域。
再次拖動(dòng)紅框區(qū)域。當(dāng)拖放到底部區(qū)域時(shí)，在放置區(qū)域中顯示字符“onDragOver”。
當(dāng)你放開(kāi)拖到拖放區(qū)域紅框的區(qū)域，你會(huì)看到“onDrop”的字符在底部區(qū)域中。
再次拖動(dòng)紅框以與放置區(qū)域重疊。將顯示“onDragOver”字符。
拖動(dòng)紅框并將其拖動(dòng)到拖放區(qū)域之外。放置區(qū)域中的字符顯示變?yōu)椤皁nDragLeave”。
