元素拖拽分成3個步驟：按下滑鼠，移動滑鼠，鬆開滑鼠。

拖拽原理：按下拖拽元素後開始監聽文件中滑鼠移動事件，然後再監聽滑鼠鬆開事件；滑鼠移動時，元素div要隨著滑鼠一起移動，需要計算元素div位移的距離（移動的距離=滑鼠離可視視窗的位置 – 滑鼠在div中相對於左上角的位置）。然後鬆開滑鼠時，刪除移動事件和鬆開事件，元素完成拖拽。

一開始先監聽滑鼠按下事件mousedown，事件觸發執行mouseHandler函式；

div.addEventListener("mousedown",mouseHandler);

進入mouseHandler函式後，進行if else if 的判斷，如果是按下事件，就監聽滑鼠移動和鬆開事件，這裡要用document文件來作為監聽物件，如果使用元素div監聽時，如果滑鼠在移動過程超出了div元素，就無法拖拽元素；

進入移動事件，就把滑鼠移動的距離（滑鼠離可視視窗的位置 – 滑鼠在div中相對於左上角的位置）賦值給元素的left和top，元素就可以隨著滑鼠移動；

最後進入鬆開滑鼠事件，刪除了移動和送開滑鼠事件，元素就會停在滑鼠鬆開的位置

關鍵：元素顯示位置=滑鼠離可視視窗的位置 – 滑鼠相對於在div元素左上角的位置

js程式碼帶註釋

var div=document.querySelector("div");
    var offsetX,offsetY;　　//定義全域性變數用於接收滑鼠座標的變數
    div.addEventListener("mousedown",mouseHandler);
    function mouseHandler(e){  //事件的執行函式自帶引數e
      if(e.type==="mousedown"){  //e.type是執行事件的型別
        offsetX=e.offsetX;    
        offsetY=e.offsetY;   
        document.addEventListener("mousemove",mouseHandler) 
        document.addEventListener("mouseup",mouseHandler)  //如果有滑鼠移動或鬆開事件的發生再次執行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);  //刪除滑鼠移動和滑鼠鬆開事件
      }
    }

效果如圖：

注意：div元素要設定定位才可以進行移動。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。