js鼠标拖拽事件

作者: 小菇凉大思想 | 来源:发表于2017-12-21 15:08 被阅读0次

怎么区分鼠标是单击还是拖动？
js实现拖拽
js鼠标拖拽事件
web前端-原生鼠标拖拽效果
31.JS
July 30-day13-Python中Pygame
js鼠标拖拽
js鼠标拖拽
事件
2018-11-07 JavaScript

只记录left，top同理。
clientX：返回鼠标相对于浏览器的水平坐标；
offsetLeft：返回当前对象距离浏览器（父对象）的左侧距离；
offsetWidth：对象的可见宽度；
onmousemove：鼠标移动事件；

连接点是鼠标放在div上拖动时的位置（坐标）不会改变的，起名字为unchangX；

鼠标拖动事件是利用position：absolute绝对定位改变left和top，left的位置是通过clientX-unchangeX得到的。

无标题.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标拖拽事件</title>
    <style type="text/css">
        #box{
            width:100px;
            height:100px;
            background-color:cornflowerblue;
            position:absolute;
            left:0;
            top:0;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById("box"),
                unchangeX = 0,
                unchangeY = 0;
            oDiv.onmousedown =function(ev){//鼠标按下
                var oEvent=ev||event;
                var unchangeX = oEvent.clientX - oDiv.offsetLeft;//鼠标的x坐标减去box的左边距离，unchangeX这个距离是不会变的，通过这个新鼠标的X坐标减去unchangeX就是box的Left
                var unchangeY = oEvent.clientY - oDiv.offsetTop;
                document.onmousemove = function(ev){//为了防止鼠标移动太快而离开了DIV产生了bug，所以要给整个页面加onmousemove事件
                    var oEvent = ev||event;
                    var oLeft = oEvent.clientX - unchangeX;
                    var oTop = oEvent.clientY - unchangeY;
                    //优化部分：鼠标移动到浏览器左侧、右侧、上侧、下侧时的问题
                    if(oLeft < 0){
                        oLeft = 0;
                    }else if(oLeft>document.documentElement.clientWidth - oDiv.offsetWidth){
                        oLeft = document.documentElement.clientWidth - oDiv.offsetWidth;
                    }
                    if(oTop < 0){
                        oTop = 0;
                    }else if(oTop>document.documentElement.clientHeight - oDiv.offsetHeight){
                        oTop = document.documentElement.clientHeight - oDiv.offsetHeight;
                    }
                    oDiv.style.left = oLeft + 'px';
                    oDiv.style.top = oTop + 'px';
                };
                document.onmouseup = function(){//鼠标松开时
                    document.onmousemove = null;//把鼠标移动清除
                    document.onmouseup = null;//把鼠标松开清除
                };
                return false;
            };
        }
    </script>
</body>
</html>