Jqury 拖拽div

最新推荐文章于 2022-05-07 18:52:09 发布

bairan9926

最新推荐文章于 2022-05-07 18:52:09 发布

阅读量90

点赞数

原文链接：http://www.cnblogs.com/July-/p/5799985.html

版权

//点击拖拽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;
        }

转载于:https://www.cnblogs.com/July-/p/5799985.html

bairan9926

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jqury 拖拽div

//点击拖拽div在document——（$(document) ）上移动： 1定位（left ,top）2.根据鼠标在document上的动态坐标，得到div新的动态left、top的属性值js： <script src="../jquery-3.0.0.js"></script> <script> ...
复制链接

扫一扫