实现div鼠标拖动效果

深碍√TFBOYSˉ_ 2022-05-13 07:36 282阅读 0赞

实现这个效果的关键是给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>