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

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

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云服務(wù)器云服務(wù)器 js實(shí)現(xiàn)鼠標(biāo)拖動(dòng)div DIV跟隨鼠標(biāo)移動(dòng) js實(shí)現(xiàn)div拖動(dòng) js鼠標(biāo)拖動(dòng)3D立方體旋轉(zhuǎn)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80762.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

AaronYuan 2019-08-23 16:48 評(píng)論0 收藏0