资讯专栏INFORMATION COLUMN

鼠标拖动div移动js代码

libin19890520 / 452人阅读

1.代码

 var disX=0;
    var disY=0;
    $(".private_area").on("mousedown",function(event) {
        disX=event.clientX-$(".private_area")[0].offsetLeft;
        disY=event.clientY-$(".private_area")[0].offsetTop;

        $(document).mousemove(function(event) {
            var l=event.clientX-disX;
            var t=event.clientY-disY;
            if(l<0)
            {
                l=0;
            }
            else if(l>document.documentElement.clientWidth-$(".private_area")[0].offsetWidth)
            {
                l=document.documentElement.clientWidth-$(".private_area")[0].offsetWidth;
            }
            if(t<0)
            {
                t=0;
            }
            else if(t>document.documentElement.clientHeight-$(".private_area")[0].offsetHeight)
            {
                t=document.documentElement.clientHeight-$(".private_area")[0].offsetHeight;
            }
            $(".private_area").css({
                left: l,
                top: t,
                marginTop:0,
                marginLeft:0
            });
        });
        $(document).mouseup(function(event) {
            $(document).off("mousemove");
            $(document).off("mouseup");
        });
        event.stopPropagation();
    });
    
    注:绑定class元素即可

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80762.html

相关文章

  • js 实现上下拖动改变父 div 的高度,左右上下拖动动态分割孩子的宽高

    摘要:需求实现父里面左右,上下动态分割,并上下改变父的高度,并且宽和高都是按百分比如图。一个改变父高度的,用于上下拖动不能占有位置,所以要绝对定位,并定位到最右下角。上下拖动的,当上拖动时,的父的高度变小,当下拖动时,的父的高度变大。 showImg(https://upload-images.jianshu.io/upload_images/12890819-b26f439121646da...

    Cheng_Gang 评论0 收藏0
  • js 实现上下拖动改变父 div 的高度,左右上下拖动动态分割孩子的宽高

    摘要:需求实现父里面左右,上下动态分割,并上下改变父的高度,并且宽和高都是按百分比如图。一个改变父高度的,用于上下拖动不能占有位置,所以要绝对定位,并定位到最右下角。上下拖动的,当上拖动时,的父的高度变小,当下拖动时,的父的高度变大。 showImg(https://upload-images.jianshu.io/upload_images/12890819-b26f439121646da...

    asoren 评论0 收藏0
  • js 实现上下拖动改变父 div 的高度,左右上下拖动动态分割孩子的宽高

    摘要:需求实现父里面左右,上下动态分割,并上下改变父的高度,并且宽和高都是按百分比如图。一个改变父高度的,用于上下拖动不能占有位置,所以要绝对定位,并定位到最右下角。上下拖动的,当上拖动时,的父的高度变小,当下拖动时,的父的高度变大。 showImg(https://upload-images.jianshu.io/upload_images/12890819-b26f439121646da...

    ytwman 评论0 收藏0
  • 【详】JS实现拖拽元素互换位置

    摘要:只有在可放置的元素上面松开鼠标才会触发事件,所以这个是被放置的节点。 写在前面的废话 大家好,我是练习js时长接近两年半的个人练习生--李大雷 算了,直接 鸡,你太美~ 应用场景 很多时候,我们需要让用户来自定义自己想要的菜单顺序,或者一些按钮的排序,那么这个时候,怎么给用户自定义顺序呢?拖拽无疑是最简单易懂的,因为玩过手机的都知道怎么拖动桌面的app来改变位置。 那么要怎么做呢?最简...

    lentrue 评论0 收藏0
  • 【详】JS实现拖拽元素互换位置

    摘要:只有在可放置的元素上面松开鼠标才会触发事件,所以这个是被放置的节点。 写在前面的废话 大家好,我是练习js时长接近两年半的个人练习生--李大雷 算了,直接 鸡,你太美~ 应用场景 很多时候,我们需要让用户来自定义自己想要的菜单顺序,或者一些按钮的排序,那么这个时候,怎么给用户自定义顺序呢?拖拽无疑是最简单易懂的,因为玩过手机的都知道怎么拖动桌面的app来改变位置。 那么要怎么做呢?最简...

    AaronYuan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<