首先鼠標拖動事件需要與標簽的draggable屬性配合使用，在標簽中設置draggable屬性為true則表示允許拖動該元素
<body>
<!-- 設置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>
dragstart事件
當拖動開始時觸發(fā)一次該事件，可以用于拖動前對元素進行一些預處理
<body>
<div draggable="true"></div>
</body>
</html>
<script>
let div = document.querySelector("div");
div.addEventListener("dragstart", (params) => {
console.log("dragstart事件觸發(fā)");
})
</script>
dragenter事件
當正在拖拽元素的鼠標進入監(jiān)聽元素時觸發(fā)事件，需要注意的是此監(jiān)聽事件需要賦在被進入的元素上，事件源event指向被進入的元素，可以用于當拖拽鼠標位于某一元素時對該元素進行一些改變
<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相反，當鼠標移出時觸發(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)聽元素中，當拖拽鼠標位于監(jiān)聽元素中時就會不斷觸發(fā)該事件，即使鼠標不移動，可以用于在元素內(nèi)跟隨鼠標
<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()方法，當鼠標在監(jiān)聽元素內(nèi)停止拖拽時就會觸發(fā)同樣監(jiān)聽該元素的drop事件文章來源：http://www.zghlxwxcb.cn/news/detail-447783.html
<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)聽被拖拽的元素，當該元素的拖拽被取消時dragend事件被觸發(fā)，與drop使用方法類似但作用的元素不同文章來源地址http://www.zghlxwxcb.cn/news/detail-447783.html
<body>
<div draggable="true"></div>
</body>
</html>
<script>
let div = document.querySelector("div");
div.addEventListener("dragend", () => {
console.log("dragend事件觸發(fā)");
})
</script>
到了這里，關于JavaScript鼠標拖動事件監(jiān)聽使用方法及實例效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
