JavaScript鼠標(biāo)拖動事件監(jiān)聽使用方法以及實例效果演示

更新時間：2023年05月04日 10:50:57 作者：a辰龍a

最近工作中遇到了鼠標(biāo)拖動事件監(jiān)聽的相關(guān)需求,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript鼠標(biāo)拖動事件監(jiān)聽使用方法以及實例效果演示的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

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

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

drag事件

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

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

dragstart事件

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

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

dragenter事件

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

<body>
    <div style="background-color: blue;"></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>

dragleave 事件

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

<body>
    <div style="background-color: blue;"></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>

dragover 事件

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

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

drop事件

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

<body>
    <div style="background-color: blue;"></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>

dragend事件

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

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

總結(jié)

到此這篇關(guān)于JavaScript鼠標(biāo)拖動事件監(jiān)聽使用方法以及實例效果演示的文章就介紹到這了,更多相關(guān)js鼠標(biāo)拖動事件監(jiān)聽使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: