js拖拽效果的原理及實現

Posted on by

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

拖拽的流程動作

1、鼠標按下 會觸發onmousedown事件

2、鼠標移動 會觸發onmousemove事件

3、鼠標松開 會觸發onmouseup事件

拖拽原理

1.鼠標按下+鼠標移動 = 拖拽——-事件 onmousedown + onmousemove

2.鼠標松開 = 無拖拽——–停止拖拽 onmouseup

3.鼠標偏移 = 拖拽距離

當點擊dom的時候，記錄當前鼠標的坐標值，也就是x、y值，以及被拖拽的dom的top、left值，而且還要在鼠標按下的回調函數裡添加鼠標移動的事件：

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

和添加鼠標抬起的事件

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

這個抬起的事件是為瞭解除鼠標移動的監聽，因為隻有在鼠標按下才可以拖拽，抬起就停止不會移動瞭。

當鼠標按下鼠標移動的時候，記錄移動中的x、y值，那麼這個被拖拽的dom的top和left值就是：
top=鼠標按下時記錄的dom的top值+（移動中的y值 – 鼠標按下時的y值）
left=鼠標按下時記錄的dom的left值+（移動中的x值 – 鼠標按下時的x值）;

//極簡單版
   var div=document.querySelector("div");
    // 按下時開始監聽在文檔中鼠標移動的事件
    // 開始監聽鼠標松開鍵的事件
    // 隻有按下時才準備拖拽
    div.onmousedown=function(e1){
        // 當鼠標在文檔移動時，不能再div上移動，因為鼠標可能離開div，造成無法拖拽
        div.onmousemove=function(e){
            // 當鼠標移動時，將當前鼠標相對視口的坐標賦值給元素的left和top
            // 因為我們需要在按下的位置拖拽，因此我們還需要獲取按下鍵鼠標相對div的左上角位置
            // 使用當前鼠標位置減去這個相對元素的左上角位置，保證鼠標所按位置拖拽
            div.style.left=e.clientX-e1.offsetX+"px";
            div.style.top=e.clientY-e1.offsetY+"px";
        }
        // 當釋放鼠標鍵時，刪除鼠標移動事件和刪除鼠標釋放事件
        div.onmouseup=function(){
            document.onmousemove=null;
            document.onmouseup=null;
        }
    }

//簡單版
    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)
    }

// 簡單升級版
    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、被拖拽的元素的樣式要設置成絕對或相對位置才有效果。
b、拖拽加到document，不然內容會脫離

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：