jQuery实现鼠标拖拽div效果

小约翰仓鼠

已于 2022-04-06 11:17:28 修改

阅读量1.8k

点赞数

文章标签： html css

于 2022-04-06 07:47:22 首次发布

原文链接：https://blog.csdn.net/hry1243916844/article/details/77718186

版权

方法一：

此方法有一个小bug,拖拽图片时会另新建标签页显示图片，方法二没有

实现这个效果的关键是给div的定位设置成absolute,然后获得鼠标移动后的位置坐标并给要移动的div。
将它封装成了一个函数，只需要传入参数即可使用。
downDiv:鼠标按下部分的id；
moveDiv:跟随鼠标移动的div的id;
代码如下：


<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>jquery实现div拖拽</title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
    #moveBar {
    position: absolute;
    width: 200px;
    height: 400px;
    background: black;、
    color：white;
    border: solid 1px #000;
    }
    #banner {
    background: #ddd;
    cursor: move;
    }
</style>
</head>
<body>
    <div id="moveBar">
        <div id="banner">按住鼠标移动当前div</div>
        <div id="content">内容部分</div>
    </div>
<script>
    $(function () {
        dragPanelMove("#banner","#moveBar");
        function dragPanelMove(downDiv,moveDiv){
            $(downDiv).mousedown(function (e) {
                    var isMove = true;
                    var div_x = e.pageX - $(moveDiv).offset().left;
                    var div_y = e.pageY - $(moveDiv).offset().top;
                    $(document).mousemove(function (e) {
                        if (isMove) {
                            var obj = $(moveDiv);
                            obj.css({"left":e.pageX - div_x, "top":e.pageY - div_y});
                        }
                    }).mouseup(
                        function () {
                        isMove = false;
                    });
            });

        }

    });
</script>
</body>
</html>

方法二：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <title>jquery实现鼠标拖拽div改变位置</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #pic {
            width: 80px;
            height: 80px;
            position: absolute;
            left: 0;
            right: 0;
            background: red;

        }

        a {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="pic">

    </div>
    <script type="text/javascript">
        var drag = function (obj) {
            obj.on("mousedown", start);

            function start(event) {
                console.log(event.button);
                if (event.button == 0) { //判断是否点击鼠标左键  
                    /*  
                     * clientX和clientY代表鼠标当前的横纵坐标  
                     * offset()该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。  
                     * bind()绑定事件，同样unbind解绑定，此效果的实现最后必须要解绑定，否则鼠标松开后拖拽效果依然存在  
                     * getX获取当前鼠标横坐标和对象离屏幕左侧距离之差（也就是left）值，  
                     * getY和getX同样道理，这两个差值就是鼠标相对于对象的定位，因为拖拽后鼠标和拖拽对象的相对位置是不变的  
                     */
                    gapX = event.clientX - obj.offset().left;
                    gapY = event.clientY - obj.offset().top;
                    //movemove事件必须绑定到$(document)上，鼠标移动是在整个屏幕上的  
                    $(document).bind("mousemove", move);
                    //此处的$(document)可以改为obj  
                    $(document).bind("mouseup", stop);

                }
                return false; //阻止默认事件或冒泡  
            }

            function move(event) {
                obj.css({
                    "left": (event.clientX - gapX) + "px",
                    "top": (event.clientY - gapY) + "px"
                });
                return false; //阻止默认事件或冒泡  
            }

            function stop() {
                //解绑定，这一步很必要，前面有解释  
                $(document).unbind("mousemove", move);
                $(document).unbind("mouseup", stop);

            }
        }
        obj = $("#pic");
        drag(obj); //传入的必须是jQuery对象，否则不能调用jQuery的自定义函数  
    </script>
</body>

</html>