鼠标拖动div移动js代码

libin19890520 发布于2019-08-20 12:02 / 459人阅读

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元素即可

GPU云服务器云服务器 js实现鼠标拖动div DIV跟随鼠标移动 js实现div拖动 js鼠标拖动3D立方体旋转

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

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

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

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

Cheng_Gang 2019-08-30 15:55 评论0 收藏0
js 实现上下拖动改变父 div 的高度，左右上下拖动动态分割孩子的宽高

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

asoren 2019-08-02 13:59 评论0 收藏0
js 实现上下拖动改变父 div 的高度，左右上下拖动动态分割孩子的宽高

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

ytwman 2019-08-23 14:20 评论0 收藏0
【详】JS实现拖拽元素互换位置

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

lentrue 2019-08-02 16:12 评论0 收藏0
【详】JS实现拖拽元素互换位置

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

AaronYuan 2019-08-23 16:48 评论0 收藏0