JavaScript實(shí)現(xiàn)鼠標(biāo)拖拽效果

更新時(shí)間：2021年10月26日 11:16:58 作者：wait......

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)鼠標(biāo)拖拽效果的具體代碼，供大家參考，具體內(nèi)容如下

這次的效果圖如下：

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

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

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

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

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

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

還要注意?。?！

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

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

因?yàn)槲覀兊囊馑疾⒉皇鞘髽?biāo)在div中移動(dòng)，而是在整個(gè)頁面移動(dòng)

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

<!DOCTYPE html>
<html lang="en">
<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è)置定位  就想移動(dòng) 改變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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: