HTML DOM-->拖拽效果

实现：按下鼠标拖动，盒子跟着一起移动

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js_excise</title>
        <style type="text/css">
            body{
                position: relative;
            }
            div{
                width: 100px;
                height: 100px;
                position: absolute;
                background: palegreen;
            }
        </style>
    </head>

    <body>
        <div id="box"></div>
        
        <script type="text/javascript">
            //获取元素节点
            var jsBOX = document.getElementById('box')
            
            //定义坐标
            var baseX = 0;
            var baseY = 0;
            var moveX = 0;
            var moveY = 0;
            
            //鼠标按下事件
            jsBOX.addEventListener('mousedown',function(e){
                var e1 = e || window.event
                
                //获取鼠标按下位置
                baseX = e1.pageX
                baseY = e1.pageY
                console.log(baseX,baseY)
                
                //鼠标移动事件
                document.onmousemove= function(e){
                    var e2 = e || window.event
                    
                    //鼠标移动后的位置
                    moveX = e2.pageX - baseX
                    moveY = e2.pageY - baseY
                    baseX = e2.pageX
                    baseY = e2.pageY
                    console.log(baseX,baseY)
                    
                    //移动后盒子位置
                    jsBOX.style.left = jsBOX.offsetLeft + moveX + 'px'
                    jsBOX.style.top = jsBOX.offsetTop + moveY + 'px'    
                }    
            },false)
            
            //鼠标抬起事件-->清掉移动事件
            document.addEventListener('mouseup',function(){
                document.onmousemove = null
            },false)
        </script>
    </body>
</html>

输出：

 

posted @ 2020-05-05 22:35  abner_pan  阅读(324)  评论(0)  编辑  收藏  举报