溫馨提示×

溫馨提示×

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

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

JavaScript鼠標拖動事件監(jiān)聽使用的方法是什么

發(fā)布時間：2023-05-04 11:10:50 來源：億速云 閱讀：153 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹了JavaScript鼠標拖動事件監(jiān)聽使用的方法是什么的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇JavaScript鼠標拖動事件監(jiān)聽使用的方法是什么文章都會有所收獲，下面我們一起來看看吧。

首先鼠標拖動事件需要與標簽的draggable屬性配合使用，在標簽中設(shè)置draggable屬性為true則表示允許拖動該元素

<body>
    <!-- 設(shè)置draggable為true -->
    <div draggable="true"></div>
</body>

drag事件

鼠標拖動事件，當元素被拖動時該事件會持續(xù)重復觸發(fā)，可以用于實時定位鼠標位置以讓某元素跟隨鼠標

<body>
    <div draggable="true"></div>
</body>
</html>
<script>
    let div = document.querySelector("div");
    div.addEventListener("drag", (params) => {
        console.log("drag事件觸發(fā)");
    })
</script>

JavaScript鼠標拖動事件監(jiān)聽使用的方法是什么

dragstart事件

當拖動開始時觸發(fā)一次該事件，可以用于拖動前對元素進行一些預處理

<body>
    <div draggable="true"></div>
</body>
</html>
<script>
    let div = document.querySelector("div");
    div.addEventListener("dragstart", (params) => {
        console.log("dragstart事件觸發(fā)");
    })
</script>

JavaScript鼠標拖動事件監(jiān)聽使用的方法是什么

dragenter事件

當正在拖拽元素的鼠標進入監(jiān)聽元素時觸發(fā)事件，需要注意的是此監(jiān)聽事件需要賦在被進入的元素上，事件源event指向被進入的元素，可以用于當拖拽鼠標位于某一元素時對該元素進行一些改變

<body>
    <div ></div>
    <div draggable="true"></div>
</body>
</html>
<script>
    let div = document.querySelector("div");
    div.addEventListener("dragenter", (e) => {
        console.log("dragenter事件觸發(fā)");
        e.target.style.backgroundColor = "green"
        console.log("顏色改變");
    })
</script>

JavaScript鼠標拖動事件監(jiān)聽使用的方法是什么

dragleave 事件

與dragenter相反，當鼠標移出時觸發(fā)該事件

<body>
    <div ></div>
    <div draggable="true"></div>
</body>
</html>
<script>
    let div = document.querySelector("div");
    div.addEventListener("dragleave", (e) => {
        console.log("dragleave事件觸發(fā)");
        e.target.style.backgroundColor = "green"
        console.log("顏色改變");
    })
</script>

JavaScript鼠標拖動事件監(jiān)聽使用的方法是什么

dragover 事件

與drag事件類似，但是范圍限制在被監(jiān)聽元素中，當拖拽鼠標位于監(jiān)聽元素中時就會不斷觸發(fā)該事件，即使鼠標不移動，可以用于在元素內(nèi)跟隨鼠標

<body>
    <div ></div>
    <div draggable="true"></div>
</body>
</html>
<script>
    let div = document.querySelector("div");
    div.addEventListener("dragover", () => {
        console.log("dragover事件觸發(fā)");
    })
</script>

JavaScript鼠標拖動事件監(jiān)聽使用的方法是什么

drop事件

該事件需要配合dragover使用，在dragover事件中給event調(diào)用.preventDefault()方法，當鼠標在監(jiān)聽元素內(nèi)停止拖拽時就會觸發(fā)同樣監(jiān)聽該元素的drop事件

<body>
    <div ></div>
    <div draggable="true"></div>
</body>
</html>
<script>
    let div = document.querySelector("div");
    div.addEventListener("dragover", (e) => {
        console.log("dragover事件觸發(fā)");
        e.preventDefault()
    })
    div.addEventListener("drop", () => {
        console.log("drop事件觸發(fā)");
    })
</script>

JavaScript鼠標拖動事件監(jiān)聽使用的方法是什么

dragend事件

該事件需要監(jiān)聽被拖拽的元素，當該元素的拖拽被取消時dragend事件被觸發(fā)，與drop使用方法類似但作用的元素不同

<body>
    <div draggable="true"></div>
</body>
</html>
<script>
    let div = document.querySelector("div");
    div.addEventListener("dragend", () => {
        console.log("dragend事件觸發(fā)");
    })
</script>

JavaScript鼠標拖動事件監(jiān)聽使用的方法是什么

關(guān)于“JavaScript鼠標拖動事件監(jiān)聽使用的方法是什么”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“JavaScript鼠標拖動事件監(jiān)聽使用的方法是什么”知識都有一定的了解，大家如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

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

AI
助
手