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

電白ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書(shū)合作）期待與您的合作！

元素拖拽分成3個(gè)步驟：按下鼠標(biāo)，移動(dòng)鼠標(biāo)，松開(kāi)鼠標(biāo)。

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

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

div.addEventListener("mousedown",mouseHandler);

進(jìn)入mouseHandler函數(shù)后，進(jìn)行if else if 的判斷，如果是按下事件，就監(jiān)聽(tīng)鼠標(biāo)移動(dòng)和松開(kāi)事件，這里要用document文檔來(lái)作為監(jiān)聽(tīng)對(duì)象，如果使用元素div監(jiān)聽(tīng)時(shí)，如果鼠標(biāo)在移動(dòng)過(guò)程超出了div元素，就無(wú)法拖拽元素；

進(jìn)入移動(dòng)事件，就把鼠標(biāo)移動(dòng)的距離（鼠標(biāo)離可視窗口的位置 – 鼠標(biāo)在div中相對(duì)于左上角的位置）賦值給元素的left和top，元素就可以隨著鼠標(biāo)移動(dòng)；

最后進(jìn)入松開(kāi)鼠標(biāo)事件，刪除了移動(dòng)和送開(kāi)鼠標(biāo)事件，元素就會(huì)停在鼠標(biāo)松開(kāi)的位置

關(guān)鍵：元素顯示位置=鼠標(biāo)離可視窗口的位置 – 鼠標(biāo)相對(duì)于在div元素左上角的位置

js代碼帶注釋

var div=document.querySelector("div");
    var offsetX,offsetY;　　//定義全局變量用于接收鼠標(biāo)坐標(biāo)的變量
    div.addEventListener("mousedown",mouseHandler);
    function mouseHandler(e){  //事件的執(zhí)行函數(shù)自帶參數(shù)e
      if(e.type==="mousedown"){  //e.type是執(zhí)行事件的類(lèi)型
        offsetX=e.offsetX;    
        offsetY=e.offsetY;   
        document.addEventListener("mousemove",mouseHandler) 
        document.addEventListener("mouseup",mouseHandler)  //如果有鼠標(biāo)移動(dòng)或松開(kāi)事件的發(fā)生再次執(zhí)行mouseHandler函數(shù)
      }else if(e.type==="mousemove"){      
        div.style.left=e.clientX-offsetX+"px"; //鼠標(biāo)相對(duì)當(dāng)前可視窗口的坐標(biāo) - 相對(duì)元素左上角的坐標(biāo) 
        div.style.top=e.clientY-offsetY+"px";
        
      }else if(e.type==="mouseup"){  
        document.removeEventListener("mousemove",mouseHandler);
        document.removeEventListener("mouseup",mouseHandler);  //刪除鼠標(biāo)移動(dòng)和鼠標(biāo)松開(kāi)事件
      }
    }

網(wǎng)站標(biāo)題：js拖拽效果的實(shí)現(xiàn)方法-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://jinyejixie.com/article28/ccpcjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、手機(jī)網(wǎng)站建設(shè)、ChatGPT、網(wǎng)頁(yè)設(shè)計(jì)公司、搜索引擎優(yōu)化、小程序開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)