溫馨提示×

溫馨提示×

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

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

怎么使用js實(shí)現(xiàn)模擬鼠標(biāo)拖拽事件

發(fā)布時間：2022-08-08 14:21:59 來源：億速云 閱讀：165 作者：iii 欄目：web開發(fā)

本篇內(nèi)容介紹了“怎么使用js實(shí)現(xiàn)模擬鼠標(biāo)拖拽事件”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

這次的效果圖如下：

怎么使用js實(shí)現(xiàn)模擬鼠標(biāo)拖拽事件

我認(rèn)為這個實(shí)驗(yàn)的難點(diǎn)是保持盒子和鼠標(biāo)的相對位置不變，通過鼠標(biāo)按下和移動來實(shí)現(xiàn)拖拽的效果

如何實(shí)現(xiàn)拖拽的效果呢？

我們需要用到三個函數(shù)： onmousedown、onmousemove、onmouseup，分別表示鼠標(biāo)按下、鼠標(biāo)移動、鼠標(biāo)抬起

在鼠標(biāo)按下的回調(diào)函數(shù)中，我們需要通過clientX和clientY獲取鼠標(biāo)的初始位置，通過offsetLeft和offsetTop獲取盒子的初始位置，然后計(jì)算鼠標(biāo)初始位置和盒子初始位置的差值；

在鼠標(biāo)移動的回調(diào)函數(shù)中，我們需要根據(jù)鼠標(biāo)的位置和之前計(jì)算得到的差值來獲取盒子現(xiàn)在的位置，然后改變其left和top值，不要忘記將position設(shè)置為absolute（因?yàn)槲揖屯浟?。?！?

在鼠標(biāo)抬起的回調(diào)函數(shù)中，我們需要清除鼠標(biāo)移動和鼠標(biāo)抬起，通過將onmousemove和onmouseup值設(shè)置為null即可

還要注意！?。?/strong>

鼠標(biāo)移動函數(shù)和抬起函數(shù)均要寫在鼠標(biāo)按下函數(shù)中，因?yàn)槲覀兪且谑髽?biāo)按下這個動作之后來設(shè)計(jì)之后的行為，而且很重要的一點(diǎn)是：

鼠標(biāo)按下函數(shù)是p的，鼠標(biāo)移動和鼠標(biāo)抬起是document的

因?yàn)槲覀兊囊馑疾⒉皇鞘髽?biāo)在p中移動，而是在整個頁面移動

重點(diǎn)大概是這些了，下面是代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            border-radius: 14px;
            box-shadow: 2px 2px 6px rgba(0,0,0,.3);

            /* 好家伙 都沒設(shè)置定位  就想移動 改變left。。。 */
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        let box=document.getElementById("box");
        box.onmousedown=function(event){
            let disx=event.clientX-box.offsetLeft;
            let disy=event.clientY-box.offsetTop;
            //此處不是box.onmousemove，是document.onmousemove
            document.onmousemove=function(event){
                box.style.left=event.clientX-disx+'px';
                box.style.top=event.clientY-disy+'px';
            }

            //要寫在ommousedown里面
            document.onmouseup=function(){
                //這倆都要置為null
            document.onmousemove=null;
            document.onmouseup=null;
            return false;
        }
        }
        
    </script>
</body>
</html>

“怎么使用js實(shí)現(xiàn)模擬鼠標(biāo)拖拽事件”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問一下細(xì)節(jié)

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

js
AI
助
手