欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS的ondrag事件(拖拽效果)

程序员文章站 2022-06-30 19:12:48
...

draggable:

html元素属性,设置为true时,表示该元素可以进行拖动。

<p draggable="true" id = "testP"></p>

拖动事件:

1.dragstart:当元素拖动的时候触发
2.dragover:当元素拖动到目标容器时触发
3.drop:当元素拖动到目标容器并松开鼠标时触发

拖动事件四步走:

1.设置拖动元素为可拖动状态(也就是设置元素的draggable属性为true时)
2.给拖动元素添加dragstart事件:并通过事件对象的e.transfer对象的setData的方法设置一个属性
3.给目标容器添加drop事件,再通过事件对象的dataTransfer对象的getData方法来获取上一步设置的属性,从而获取到拖动元素,然后再通过appendChild方法将拖动元素添加到目标容器。
4.给目标容器添加dragover事件,用来阻止默认的拖动事件。

<body>
        <!--第一步-->
        <p id="testP" draggable="true" >拖动我</p>
        <div class="test"></div>
        <div class="test"></div>
        
        <script>
            var testP = document.querySelector('#testP');
            var test = document.querySelector('.test');
            
            //第二步
            testP.addEventListener('dragstart',(e)=>{
                //通过setData方法向dataTransfer对象添加一个属性
                //名pid,值为拖动元素的ID
                e.dataTransfer.setData('pid',e.target.id);
                console.log(e.target)
            })
            
            //第三步
            test.addEventListener('drop',(e)=>{
                //获取到拖动元素的id
                let data = e.dataTransfer.getData('pid');
                //通过id获取到拖动元素
                let p = document.getElementById(data);
                console.log(p)
                test.appendChild(p);
            })
            
            //第四步
            document.addEventListener('dragover',function(e){
                e.preventDefault();
            })
        </script>
</body>


拓展:

使用mousedownmousemovemousedown模拟拖拽效果

<body>
        <div class="square"></div>
        
        <script>
            var square = document.querySelector('.square');
            function drag(el){
                var isClick = false;
                    el.addEventListener('mousedown',function(e){
                        isClick = true;
                        let x = e.clientX,
                            y = e.clientY,  
                            //方块元素距离浏览器左边和顶部的距离
                            elLeft = el.offsetLeft,
                            elTop = el.offsetTop;
                
                            
                        document.addEventListener('mousemove',function(e){
                            let clx = e.clientX;
                            let cly = e.clientY;
                                
                            if(isClick==true){ 
                                //x-elLeft,点击元素位置距离元素左边边界的位置
                                //clx-(x-elLeft), 
                                el.style.left= clx -(x-elLeft)+'px';
                                el.style.top=cly - (y- elTop)+'px';
                            }
                        })
                    })
                    document.addEventListener('mouseup',function(){
                        isClick=false;
                    })
            }
            drag(square);
            
        </script>
    </body>

转载于:https://www.jianshu.com/p/2dfb870e0b88

上一篇: 转载-好的简历

下一篇: JS入门