怎样应用HTML5完成好几个原素的拖拽作用

摘要: 怎样应用HTML5完成好几个原素的拖拽作用|频道:HTML5|点一下: 次!DOCTYPE html html head meta charset= utf-8 / title /title link rel= stylesheet href= ListDragDrop.css / script function load() {var delbox = document.getE...

怎样应用HTML5完成好几个原素的拖拽作用 |频道:HTML5|点一下: 次 <

!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);


联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:网页设计模板图片