溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

js拖拽效果的實現(xiàn)方法

發(fā)布時間：2020-07-28 13:55:07 來源：億速云 閱讀：173 作者：小豬 欄目：web開發(fā)

這篇文章主要講解了js拖拽效果的實現(xiàn)方法，內(nèi)容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

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

拖拽原理：按下拖拽元素后開始監(jiān)聽文檔中鼠標移動事件，然后再監(jiān)聽鼠標松開事件；鼠標移動時，元素div要隨著鼠標一起移動，需要計算元素div位移的距離（移動的距離=鼠標離可視窗口的位置 – 鼠標在div中相對于左上角的位置）。然后松開鼠標時，刪除移動事件和松開事件，元素完成拖拽。

一開始先監(jiān)聽鼠標按下事件mousedown，事件觸發(fā)執(zhí)行mouseHandler函數(shù)；

div.addEventListener("mousedown",mouseHandler);

進入mouseHandler函數(shù)后，進行if else if 的判斷，如果是按下事件，就監(jiān)聽鼠標移動和松開事件，這里要用document文檔來作為監(jiān)聽對象，如果使用元素div監(jiān)聽時，如果鼠標在移動過程超出了div元素，就無法拖拽元素；

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

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

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

js代碼帶注釋

var div=document.querySelector("div");
    var offsetX,offsetY;　　//定義全局變量用于接收鼠標坐標的變量
    div.addEventListener("mousedown",mouseHandler);
    function mouseHandler(e){  //事件的執(zhí)行函數(shù)自帶參數(shù)e
      if(e.type==="mousedown"){  //e.type是執(zhí)行事件的類型
        offsetX=e.offsetX;    
        offsetY=e.offsetY;   
        document.addEventListener("mousemove",mouseHandler) 
        document.addEventListener("mouseup",mouseHandler)  //如果有鼠標移動或松開事件的發(fā)生再次執(zhí)行mouseHandler函數(shù)
      }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);  //刪除鼠標移動和鼠標松開事件
      }
    }

效果如圖：

js拖拽效果的實現(xiàn)方法

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

看完上述內(nèi)容，是不是對js拖拽效果的實現(xiàn)方法有進一步的了解，如果還想學習更多內(nèi)容，歡迎關注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。

AI
助
手