javascript 完美拖动效果

原生js拖动效果

我用的是 ES6 的语法,不了解的同学可以先了解下 ES6 的语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js 拖动效果</title>
    <style>
        #drag {
             100px;
            height: 100px;
            background: #000;
            position: absolute;
        }
    </style>
</head>
<body>
    <div ></div>   
    
    <script>
        window.onload = () => {
            let obj = document.getElementById('drag');
            let offsetX,offsetY;
            obj.onmousedown = e => {
                offsetX = e.clientX - obj.offsetLeft;
                offsetY = e.clientY - obj.offsetTop;

                window.onmousemove = e => {
                    obj.style.left = e.clientX - offsetX + 'px';
                    obj.style.top  = e.clientY - offsetY + 'px';
                };
            };

            obj.onmouseup = e => {
                window.onmousemove = null;
            }
        };
    </script>
</body>
</html>

jquery 拖动效果

我这里使用的版本是 jquery-1.12.4 不同的版本可能需要调整

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <style>
        div {
             100px;
            line-height: 100px;
            background: #000;
            color: skyblue;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>

<div>点住进行拖拽</div>

<!-- javascript -->
<script src="jquery-1.12.4.min.js"></script>

<script>
  $(function(){
        function drag(obj) {
            obj.on("mousedown", start);
            function start(e) {
                var event = e || window.event;
                deltaX = event.clientX - obj.offset().left;
                deltaY = event.clientY - obj.offset().top;
                // 鼠标坐标减去div离浏览器左上角的坐标
                $(document).on("mousemove", move);
                $(document).on("mouseup", stop);
                // 当鼠标移动的时候绑定mousemove事件
                // 当鼠标放开的时候绑定一个stop函数
            }

            function move(e) {
                var event = e || window.event;
                obj.css({
                    "left": (event.clientX - deltaX) + "px",
                    "top": (event.clientY - deltaY) + "px"
                });
                //只要鼠标移动就触发move函数 设置div坐标
                // 鼠标的坐标减去div离浏览器左上角的坐标就是div自己的目标
                return false;
            }

            function stop() {
                // 当鼠标放开时解除document绑定的事件
                $(document).off("mousemove", move);
                $(document).off("mouseup", stop);
                // $(document).off(); 解除所有绑定过的事件,这样也行
            }
        }
        drag( $('div') );
});
</script>
</body>
</html>

javascript 完美拖动效果

相关推荐