js鼠标拖拽事件

来源：互联网发布：delphi 算法编辑：程序博客网时间：2024/05/20 17:41

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

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

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

<!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>

阅读全文

0 0