html拖拽垃圾桶,h5学习 -- 拖拽事件模拟垃圾桶

在这次练习中学会了两个知识点

setdata,getData

在遍历一个列表时，应当在每个元素拖拽时就获取到该节点的内容信息，以便进行其他操作时对获取到的信息进行修改

setdata可以自定义一个值，以便以后使用。

在这里我是将索引号保存起来，将垃圾丢到垃圾桶时删除对应的li

我是垃圾桶

• 垃圾1
• 垃圾2
• 垃圾3
• 垃圾4
• 垃圾5

let oli = document.querySelectorAll("li")

oli.forEach((item,index)=>{

item.setAttribute('draggable','true')

item.οndragstart=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])

}

标签：function,index,oli,h5,垃圾桶,item,let,垃圾,拖拽

来源： https://www.cnblogs.com/mengtong/p/10888190.html