欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js拖拽效果的原理及實(shí)現(xiàn)

 更新時(shí)間:2021年09月23日 09:58:21   作者:翊希  
這篇文章主要為大家詳細(xì)介紹了js拖拽效果的原理及實(shí)現(xiàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

拖拽功能主要是用在讓用戶做一些自定義的動(dòng)作,比如拖動(dòng)排序,彈出框拖動(dòng)移動(dòng)等等

拖拽的流程動(dòng)作

1、鼠標(biāo)按下 會(huì)觸發(fā)onmousedown事件

2、鼠標(biāo)移動(dòng) 會(huì)觸發(fā)onmousemove事件

3、鼠標(biāo)松開 會(huì)觸發(fā)onmouseup事件

拖拽原理

1.鼠標(biāo)按下+鼠標(biāo)移動(dòng) = 拖拽-------事件 onmousedown + onmousemove

2.鼠標(biāo)松開 = 無(wú)拖拽--------停止拖拽 onmouseup

3.鼠標(biāo)偏移 = 拖拽距離

當(dāng)點(diǎn)擊dom的時(shí)候,記錄當(dāng)前鼠標(biāo)的坐標(biāo)值,也就是x、y值,以及被拖拽的dom的top、left值,而且還要在鼠標(biāo)按下的回調(diào)函數(shù)里添加鼠標(biāo)移動(dòng)的事件:

document.addEventListener(“mousemove”, moving, false)

和添加鼠標(biāo)抬起的事件

document.addEventListener(“mouseup”,function() {
document.removeEventListener(“mousemove”, moving, false);
}, false);

這個(gè)抬起的事件是為了解除鼠標(biāo)移動(dòng)的監(jiān)聽,因?yàn)橹挥性谑髽?biāo)按下才可以拖拽,抬起就停止不會(huì)移動(dòng)了。

當(dāng)鼠標(biāo)按下鼠標(biāo)移動(dòng)的時(shí)候,記錄移動(dòng)中的x、y值,那么這個(gè)被拖拽的dom的top和left值就是:
top=鼠標(biāo)按下時(shí)記錄的dom的top值+(移動(dòng)中的y值 - 鼠標(biāo)按下時(shí)的y值)
left=鼠標(biāo)按下時(shí)記錄的dom的left值+(移動(dòng)中的x值 - 鼠標(biāo)按下時(shí)的x值);

//極簡(jiǎn)單版
   var div=document.querySelector("div");
    // 按下時(shí)開始監(jiān)聽在文檔中鼠標(biāo)移動(dòng)的事件
    // 開始監(jiān)聽鼠標(biāo)松開鍵的事件
    // 只有按下時(shí)才準(zhǔn)備拖拽
    div.onmousedown=function(e1){
        // 當(dāng)鼠標(biāo)在文檔移動(dòng)時(shí),不能再div上移動(dòng),因?yàn)槭髽?biāo)可能離開div,造成無(wú)法拖拽
        div.onmousemove=function(e){
            // 當(dāng)鼠標(biāo)移動(dòng)時(shí),將當(dāng)前鼠標(biāo)相對(duì)視口的坐標(biāo)賦值給元素的left和top
            // 因?yàn)槲覀冃枰诎聪碌奈恢猛献В虼宋覀冞€需要獲取按下鍵鼠標(biāo)相對(duì)div的左上角位置
            // 使用當(dāng)前鼠標(biāo)位置減去這個(gè)相對(duì)元素的左上角位置,保證鼠標(biāo)所按位置拖拽
            div.style.left=e.clientX-e1.offsetX+"px";
            div.style.top=e.clientY-e1.offsetY+"px";
        }
        // 當(dāng)釋放鼠標(biāo)鍵時(shí),刪除鼠標(biāo)移動(dòng)事件和刪除鼠標(biāo)釋放事件
        div.onmouseup=function(){
            document.onmousemove=null;
            document.onmouseup=null;
        }
    }

//簡(jiǎn)單版
    var div=document.querySelector("div");
    var offsetX,offsetY;
    div.addEventListener("mousedown",mouseDownHandler);

    function mouseDownHandler(e){
        offsetX=e.offsetX
        offsetY=e.offsetY
        document.addEventListener("mousemove",mousemoveHandler)
        document.addEventListener("mouseup",mouseupHandler)
    }

    function mousemoveHandler(e){
        div.style.left=e.clientX-offsetX+"px"
        div.style.top=e.clientY-offsetY+"px"
    }

    function mouseupHandler(e){
        document.removeEventListener("mousemove",mousemoveHandler)
        document.removeEventListener("mouseup",mouseupHandler)
    }

// 簡(jiǎn)單升級(jí)版
    var div=document.querySelector("div");
    var offsetX,offsetY;
    div.addEventListener("mousedown",mouseHandler);

    function mouseHandler(e){
        if(e.type==="mousedown"){
            offsetX=e.offsetX;
            offsetY=e.offsetY;
            document.addEventListener("mousemove",mouseHandler)
            document.addEventListener("mouseup",mouseHandler)
        }else if(e.type==="mousemove"){
            div.style.left=e.clientX-offsetX+"px"
            div.style.top=e.clientY-offsetY+"px"
        }else if(e.type==="mouseup"){
            document.removeEventListener("mousemove",mouseHandler)
            document.removeEventListener("mouseup",mouseHandler)
        }
}

a、被拖拽的元素的樣式要設(shè)置成絕對(duì)或相對(duì)位置才有效果。
b、拖拽加到document,不然內(nèi)容會(huì)脫離

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論