jquery实现对div的拖拽功能

Posted 2020-09-20 业务高于技术
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery实现对div的拖拽功能相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>拖动DIV</title>
        <style type="text/css">
        #show1 {
                background: #7cd2f8;
                width: 100px;
                height: 100px;
                text-align: center;
                position: absolute;
                z-index: 1;
                left: 0px;
                top: 0px;
                border: 1px solid black;
                }
        #show2 {
                background: #7cd2f8;
                width: 100px;
                height: 100px;
                text-align: center;
                position: absolute;
                z-index: 1;
                left: 100px;
                top: 0px;
                border: 1px solid black;
                }
        #show3 {
                background: #7cd2f8;
                width: 100px;
                height: 100px;
                text-align: center;
                position: absolute;
                z-index: 1;
                left: 200px;
                top: 0px;
                border: 1px solid black;
                }
        #show4 {
                background: #7cd2f8;
                width: 100px;
                height: 100px;
                text-align: center;
                position: absolute;
                z-index: 1;
                left: 0px;
                top: 100px;
                border: 1px solid black;
                }
        #show5 {
                background: #7cd2f8;
                width: 100px;
                height: 100px;
                text-align: center;
                position: absolute;
                z-index: 1;
                left: 100px;
                top: 100px;
                border: 1px solid black;
                }
        #show6 {
                background: #7cd2f8;
                width: 100px;
                height: 100px;
                text-align: center;
                position: absolute;
                z-index: 1;
                left: 200px;
                top: 100px;
                border: 1px solid black;
                }
        #show7 {
                background: #7cd2f8;
                width: 100px;
                height: 100px;
                text-align: center;
                position: absolute;
                z-index: 1;
                left: 0px;
                top: 200px;
                border: 1px solid black;
                }
        #show8 {
                background: #7cd2f8;
                width: 100px;
                height: 100px;
                text-align: center;
                position: absolute;
                z-index: 1;
                left: 100px;
                top: 200px;
                border: 1px solid black;
                }
        #show9 {
                background: #7cd2f8;
                width: 100px;
                height: 100px;
                text-align: center;
                position: absolute;
                z-index: 1;
                left: 200px;
                top: 200px;
                border: 1px solid black;
                }
        #right{
            width: 306px;
            height: 306px;
            position: absolute;
            top: 0px;
            left: 400px;
            border: 1px solid black;
        }                                                                                                        
        </style>
        <script type="text/javascript" src="gongju/jquery-1.11.2.min.js"></script>
        
    </head>
    <body>
            <div class="show" id="show1" bs="1">
                1
            </div>
            <div class="show" id="show2" bs="2">
                2
            </div>
            <div class="show" id="show3" bs="3">
                3
            </div>
            <div class="show" id="show4" bs="4">
                4
            </div>
            <div class="show" id="show5" bs="5">
                5
            </div>
            <div class="show" id="show6" bs="6">
                6
            </div>
            <div class="show" id="show7" bs="7">
                7
            </div>
            <div class="show" id="show8" bs="8">
                8
            </div>
            <div class="show" id="show9" bs="9">
                9
            </div>                    
     <!----------------------------------------------->
         <div id="right">
             
         </div>
    </body>
</html>
<script type="text/javascript">
   var biao;
$(document).ready(function() {
    $(".show").mousedown(function(e) //e鼠标事件
        {
            biao=$(this).attr("bs");
            $(this).css("cursor", "move"); //改变鼠标指针的形状

            var offset = $(this).offset(); //DIV在页面的位置
            var x = e.pageX - offset.left; //获得鼠标指针离DIV元素左边界的距离
            var y = e.pageY - offset.top; //获得鼠标指针离DIV元素上边界的距离
            $(document).bind("mousemove", function(ev) //绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
                {
                    $("#show"+biao+"").stop(); //加上这个之后

                    var _x = ev.pageX - x; //获得X轴方向移动的值
                    var _y = ev.pageY - y; //获得Y轴方向移动的值

                    $("#show"+biao+"").animate({
                        left: _x + "px",
                        top: _y + "px"
                    }, 10);
                });

        });

    $(document).mouseup(function() {
        $("#show"+biao+"").css("cursor", "default");
        $(this).unbind("mousemove");
    })
})
</script>
以上是关于jquery实现对div的拖拽功能的主要内容，如果未能解决你的问题，请参考以下文章