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>