Jqury 拖拽div

//点击拖拽div在document——（ $(document) ）上移动： 1定位（left ,top）2.根据鼠标在document上的动态坐标，得到div新的动态left、top的属性值

 

js：

 

   <script src="../jquery-3.0.0.js"></script>
    <script>
        $(function(ev){  //加载完后执行：
            $("div").mousedown(  function(ev){
                        //鼠标点下的一刻 - 坐标-静态的值
                        var x= ev.pageX ;
                        var y =ev.pageY;
                        var w1= x- $("div").offset().left ;
                        var h1= y- $("div").offset().top ;
//注意：不是在div上拖拽—$("div").on("mousemove",fun)而是在文档里面拖拽——$(document).on("mousemove",fun)
                        $(document).on("mousemove",
                                function(ev){
                                    //鼠标移动- 坐标-动态的值
                                    x= ev.pageX ;
                                    y =ev.pageY;
                                    $("div").css("left",x-w1 +"px");
                                    $("div").css("top",y-h1 +"px");
                                }
                        );
                        $(document).on("mouseup",
                                function(ev){
                                    $(document).off();
                                }
                        );
                    }
            );
        });
    </script>

 

 

html

<body>
    <div id="div1"></div>
</body>

 

样式

        *{
            margin: 0;
            padding: 0;}
        #div1{
            position: absolute;
            width: 100px;
            height: 100px;
            background: yellowgreen;
        }

posted @ 2016-08-23 16:39  July_Zheng  阅读(186)  评论(0)  编辑  收藏  举报