鼠標拖動div移動js代碼

libin19890520 發布于2019-08-20 12:02 / 512人閱讀

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立方體旋轉

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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