JavaScript---拖拽原理，怎么会想不通？

拖拽：当在物体上按下鼠标时，物体可跟随鼠标移动而移动，鼠标松开时物体停在鼠标停止的地方。

拖拽功能主要是触发三个事件：

1.onmousedown：鼠标按下事件，需要计算鼠标距离物体边缘的距离

2.onmousemove：鼠标移动事件，控制不移出可视区域，设置物体跟随鼠标移动的实时位置

3.onmouseup：鼠标抬起事件，释放鼠标按下事件和鼠标移动事件

注意：offsetLeft属性只可读不可写，style.left可读可写。

下图以水平方向分析画图如下：

拖拽功能实现代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
    #box {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: absolute;
    }
    </style>
</head>

<body>
    <div id="box">
    </div>
</body>
<script>
window.onload = function() {
    var oBox = document.getElementById('box');
    var disX = 0;
    var disY = 0;

    oBox.onmousedown = function(ev) {
        var oEvent = ev || event;
        // 当前鼠标按下位置距离拖拽物体边缘的水平距离disX，
        disX = oEvent.clientX - oBox.offsetLeft;
        // 当前鼠标按下位置距离拖拽物体边缘的水平距离disX，
        disY = oEvent.clientY - oBox.offsetTop;

        document.onmousemove = function(ev) {
            var oEvent = ev || event;
            var l = oEvent.clientX - disX;
            var t = oEvent.clientY - disY;

            //防止拖出窗口可视区域处理

            if (l < 0) {
                l = 0;
            } else if (l > document.documentElement.clientWidth - oBox.offsetWidth) {
                l = document.documentElement.clientWidth - oBox.offsetWidth;
            }

            if (t < 0) {
                t = 0;
            } else if (t > document.documentElement.clientHeight - oBox.offsetHeight) {
                t = document.documentElement.clientHeight - oBox.offsetHeight;
            }

            oBox.style.left = l + 'px';
            oBox.style.top = t + 'px';
        };

        document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
        };

        return false;
    };
};
</script>

</html>

maidu_xbd

发布了147 篇原创文章 · 获赞 33 · 访问量 3万+

私信关注

JavaScript---拖拽原理，怎么会想不通？

猜你喜欢