鼠標(biāo)拖動div移動js代碼

libin19890520 發(fā)布于2019-08-20 12:02 / 506人閱讀

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

云服務(wù)器 GPU云服務(wù)器 js實(shí)現(xiàn)鼠標(biāo)拖動div DIV跟隨鼠標(biāo)移動 js實(shí)現(xiàn)div拖動 js鼠標(biāo)拖動3D立方體旋轉(zhuǎn)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/80762.html

相關(guān)文章

js 實(shí)現(xiàn)上下拖動改變父 div 的高度，左右上下拖動動態(tài)分割孩子的寬高

摘要：需求實(shí)現(xiàn)父里面左右，上下動態(tài)分割，并上下改變父的高度，并且寬和高都是按百分比如圖。一個改變父高度的，用于上下拖動不能占有位置，所以要絕對定位，并定位到最右下角。上下拖動的，當(dāng)上拖動時，的父的高度變小，當(dāng)下拖動時，的父的高度變大。 showImg(https://upload-images.jianshu.io/upload_images/12890819-b26f439121646da...

Cheng_Gang 2019-08-30 15:55 評論0 收藏0
js 實(shí)現(xiàn)上下拖動改變父 div 的高度，左右上下拖動動態(tài)分割孩子的寬高

摘要：需求實(shí)現(xiàn)父里面左右，上下動態(tài)分割，并上下改變父的高度，并且寬和高都是按百分比如圖。一個改變父高度的，用于上下拖動不能占有位置，所以要絕對定位，并定位到最右下角。上下拖動的，當(dāng)上拖動時，的父的高度變小，當(dāng)下拖動時，的父的高度變大。 showImg(https://upload-images.jianshu.io/upload_images/12890819-b26f439121646da...

asoren 2019-08-02 13:59 評論0 收藏0
js 實(shí)現(xiàn)上下拖動改變父 div 的高度，左右上下拖動動態(tài)分割孩子的寬高

摘要：需求實(shí)現(xiàn)父里面左右，上下動態(tài)分割，并上下改變父的高度，并且寬和高都是按百分比如圖。一個改變父高度的，用于上下拖動不能占有位置，所以要絕對定位，并定位到最右下角。上下拖動的，當(dāng)上拖動時，的父的高度變小，當(dāng)下拖動時，的父的高度變大。 showImg(https://upload-images.jianshu.io/upload_images/12890819-b26f439121646da...

ytwman 2019-08-23 14:20 評論0 收藏0
【詳】JS實(shí)現(xiàn)拖拽元素互換位置

摘要：只有在可放置的元素上面松開鼠標(biāo)才會觸發(fā)事件，所以這個是被放置的節(jié)點(diǎn)。寫在前面的廢話大家好，我是練習(xí)js時長接近兩年半的個人練習(xí)生--李大雷算了，直接雞,你太美~ 應(yīng)用場景很多時候，我們需要讓用戶來自定義自己想要的菜單順序，或者一些按鈕的排序，那么這個時候，怎么給用戶自定義順序呢？拖拽無疑是最簡單易懂的，因?yàn)橥孢^手機(jī)的都知道怎么拖動桌面的app來改變位置。那么要怎么做呢？最簡...

lentrue 2019-08-02 16:12 評論0 收藏0
【詳】JS實(shí)現(xiàn)拖拽元素互換位置

摘要：只有在可放置的元素上面松開鼠標(biāo)才會觸發(fā)事件，所以這個是被放置的節(jié)點(diǎn)。寫在前面的廢話大家好，我是練習(xí)js時長接近兩年半的個人練習(xí)生--李大雷算了，直接雞,你太美~ 應(yīng)用場景很多時候，我們需要讓用戶來自定義自己想要的菜單順序，或者一些按鈕的排序，那么這個時候，怎么給用戶自定義順序呢？拖拽無疑是最簡單易懂的，因?yàn)橥孢^手機(jī)的都知道怎么拖動桌面的app來改變位置。那么要怎么做呢？最簡...

AaronYuan 2019-08-23 16:48 評論0 收藏0