h5学习 -- 拖拽事件模拟垃圾桶
作者:互联网
在这次练习中学会了两个知识点
setdata,getData
在遍历一个列表时,应当在每个元素拖拽时就获取到该节点的内容信息,以便进行其他操作时对获取到的信息进行修改
setdata可以自定义一个值,以便以后使用。
在这里我是将索引号保存起来,将垃圾丢到垃圾桶时删除对应的li
<div id = "box"> <div id = "brash">我是垃圾桶</div> <ul id="brashs"> <li>垃圾1</li> <li>垃圾2</li> <li>垃圾3</li> <li>垃圾4</li> <li>垃圾5</li> </ul> </div>
<script> let oli = document.querySelectorAll("li") oli.forEach((item,index)=>{ item.setAttribute('draggable','true') item.ondragstart=function(e){ //拖拽时捕获内容 let dt = e.dataTransfer dt.setData("candy",index) } }) brash.ondragover = function(e){ e.preventDefault() e.stopPropagation() console.log(99) } brash.ondrop = function(e){ let index = e.dataTransfer.getData("candy") brashs.removeChild(oli[index]) } </script>
标签:function,index,oli,h5,垃圾桶,item,let,垃圾,拖拽 来源: https://www.cnblogs.com/mengtong/p/10888190.html