其他分享
首页 > 其他分享> > h5学习 -- 拖拽事件模拟垃圾桶

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