h5学习--七个h5拖拽事件

Posted 2021-12-01 mengtong

  <script>
        // 七个h5拖拽事件
        const box = document.getElementById(‘box‘)
        const left = document.getElementById(‘left‘)
        const right = document.getElementById(‘right‘)
        let num = 0 

        //ondragstart  拖拽开始的时候，进行移动       
        right.ondragstart= function(){
            console.log("lll")
            this.style.backgroundColor = "#ff0"
        }

        //ondrag 拖拽途中
        right.ondrag = function(){
            // console.log(num++)
        }

        //ondragend 拖拽结束松开鼠标时
        right.ondragend = function(){
            this.style.backgroundColor = "#eee"
        }

        //ondragenter 当有东西拖拽进来时
        left.ondragenter = function(){
            this.innerhtml = "释放鼠标"
            this.style.backgroundColor="#f00"
        }
       
        //ondragover 拖拽元素持续在目标身上摩擦移动
        left.ondragover = function(e){
            // console.log("目标拖拽元素持续在自己身上摩擦移动")
            // console.log(num++)
            e.preventDefault();
            e.stopPropagation();   //需要阻止时间冒泡和事件捕获
        }
       
        //ondragleave 当拖拽元素离开目标元素时
        left.ondragleave=function(){
            this.style.backgroundColor="#f60"
            this.innerHTML="拖拽到这里来"

            // document.body.box.removeChild(right)
        }
   
        // ondrop 拖拽元素丢尽目标元素身上
        left.ondrop = function(){
            this.innerHTML="拖拽到这里来"
            this.style.backgroundColor="#f60"
            console.log("拖拽元素丢尽目标元素身上")
            // document.body.removeChild(right);
            document.body.box.removeChild(right)

        }

    </script>