可随意拖拽的div

最新推荐文章于 2024-04-21 15:55:19 发布

西南疯啊疯

最新推荐文章于 2024-04-21 15:55:19 发布

阅读量4.8k

点赞数 2

本文链接：https://blog.csdn.net/qq_40102178/article/details/84548777

版权

div拖拽

css代码:

<style type="text/css">
        .drag {
            position:absolute;
            background: #48cccc;
            top:100px;
            left:200px;
            padding:0;
            width:100px;
            height:100px;
        }
    </style>

body 代码:

<body>

<div class="drag"></div>


<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var move=false;
        var _x,_y;
        $(".drag").mousedown(function(e){
            move=true;
            _x=e.pageX-parseInt($(".drag").css("left"));
            _y=e.pageY-parseInt($(".drag").css("top"));
        });
        $(document).mousemove(function(e){
            if(move){
                var x=e.pageX-_x;//控件左上角到屏幕左上角的相对位置
                var y=e.pageY-_y;
                $(".drag").css({"top":y,"left":x});
            }
        }).mouseup(function(){
            move=false;
        });
    })
</script>

<!--一.代码注释:-->

<!--（1）.$(document).ready(function(){ })，当稳当结构完全加载完毕再去函数中的代码。-->

<!--（2）.var move=false，声明一个变量并赋初值为false，用来标识div是否可以拖动，为true标识可以拖动。-->

<!--（3）.var _x,_y，声明两个变量，用来存储鼠标指针在div中按下的位置距离div左边缘和上边缘的距离。-->

<!--（4）.$(".drag").mousedown(function(e){})，为div注册mousedown事件处理函数。-->

<!--（5）.move=true，将move设置为true，这说明div是可以拖动的。-->

<!--（6）._x=e.pageX-parseInt($(".drag").css("left"))，获取鼠标指针距离div左侧的距离。-->

<!--（7）._y=e.pageY-parseInt($(".drag").css("top"))，获取鼠标指针距离div上册的距离。-->

<!--（8）.$(document).mousemove(function(e){})，为document文档注册mousemove事件处理函数，之所以注册在document，而不是div是利用了事件冒泡显现，以防止鼠标划出div导致拖动失效现象。-->

<!--（9）.if(move)，判断是否可以拖动。-->

<!--（10）.var x=e.pageX-_x，取得div的left属性值。-->

<!--（11）.var y=e.pageY-_y，取得div的top属性值。-->

<!--（12）.$(".drag").css({"top":y,"left":x})，设置left和top属性值。-->

<!--（13）.mouseup(function(){ move=false; })，注册mouseup事件处理函数，也就是鼠标松开，将moe的值设置为false。-->

</body>

西南疯啊疯

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
可随意拖拽的div

div拖拽css代码:&amp;lt;style type=&quot;text/css&quot;&amp;gt; .drag { position:absolute; background: #48cccc; top:100px; left:200px; padding:0; ...
复制链接

扫一扫