zoukankan      html  css  js  c++  java
  • 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>  
  • 相关阅读:
    TreeMap<K,V>类
    2020-3-7学习地图
    Thread类
    Redis-Windows中注册Redis后台守护进程
    Redsi-(error) NOAUTH Authentication required.
    2020-3-6学习地图
    Collection<E>接口
    Map<K,V>接口
    Set接口
    List类
  • 原文地址:https://www.cnblogs.com/mengtong/p/10888190.html
Copyright © 2011-2022 走看看