devbox
程序自动化专家
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JavaScript鼠标拖动事件监听使用方法及实例效果_监听鼠标移动

作者：程序自动化专家 | 2023-12-25 19:56:43

赞

踩

监听鼠标移动

首先鼠标拖动事件需要与标签的draggable属性配合使用，在标签中设置draggable属性为true则表示允许拖动该元素

  1. <body>
  2.     <!-- 设置draggable为true -->
  3.     <div draggable="true"></div>
  4. </body>

  1. drag事件

鼠标拖动事件，当元素被拖动时该事件会持续重复触发，可以用于实时定位鼠标位置以让某元素跟随鼠标

  1. <body>
  2.     <div draggable="true"></div>
  3. </body>
  4.  
  5. </html>
  6. <script>
  7.     let div = document.querySelector("div");
  8.     div.addEventListener("drag", (params) => {
  9.         console.log("drag事件触发");
  10.     })
  11. </script>

  1. dragstart事件

当拖动开始时触发一次该事件，可以用于拖动前对元素进行一些预处理

  1. <body>
  2.     <div draggable="true"></div>
  3. </body>
  4.  
  5. </html>
  6. <script>
  7.     let div = document.querySelector("div");
  8.     div.addEventListener("dragstart", (params) => {
  9.         console.log("dragstart事件触发");
  10.     })
  11. </script>

  1. dragenter事件

当正在拖拽元素的鼠标进入监听元素时触发事件，需要注意的是此监听事件需要赋在被进入的元素上，事件源event指向被进入的元素，可以用于当拖拽鼠标位于某一元素时对该元素进行一些改变

  1. <body>
  2.     <div style="background-color: blue;"></div>
  3.     <div draggable="true"></div>
  4. </body>
  5.  
  6. </html>
  7. <script>
  8.     let div = document.querySelector("div");
  9.     div.addEventListener("dragenter", (e) => {
  10.         console.log("dragenter事件触发");
  11.         e.target.style.backgroundColor = "green"
  12.         console.log("颜色改变");
  13.     })
  14. </script>

  1. dragleave 事件

与dragenter相反，当鼠标移出时触发该事件

  1. <body>
  2.     <div style="background-color: blue;"></div>
  3.     <div draggable="true"></div>
  4. </body>
  5.  
  6. </html>
  7. <script>
  8.     let div = document.querySelector("div");
  9.     div.addEventListener("dragleave", (e) => {
  10.         console.log("dragleave事件触发");
  11.         e.target.style.backgroundColor = "green"
  12.         console.log("颜色改变");
  13.     })
  14. </script>

  1. dragover 事件

与drag事件类似，但是范围限制在被监听元素中，当拖拽鼠标位于监听元素中时就会不断触发该事件，即使鼠标不移动，可以用于在元素内跟随鼠标

  1. <body>
  2.     <div style="background-color: blue;"></div>
  3.     <div draggable="true"></div>
  4. </body>
  5.  
  6. </html>
  7. <script>
  8.     let div = document.querySelector("div");
  9.     div.addEventListener("dragover", () => {
  10.         console.log("dragover事件触发");
  11.     })
  12. </script>

  1. drop事件

该事件需要配合dragover使用，在dragover事件中给event调用.preventDefault()方法，当鼠标在监听元素内停止拖拽时就会触发同样监听该元素的drop事件

  1. <body>
  2.     <div style="background-color: blue;"></div>
  3.     <div draggable="true"></div>
  4. </body>
  5.  
  6. </html>
  7. <script>
  8.     let div = document.querySelector("div");
  9.     div.addEventListener("dragover", (e) => {
  10.         console.log("dragover事件触发");
  11.         e.preventDefault()
  12.     })
  13.     div.addEventListener("drop", () => {
  14.         console.log("drop事件触发");
  15.     })
  16. </script>

  1. dragend事件

该事件需要监听被拖拽的元素，当该元素的拖拽被取消时dragend事件被触发，与drop使用方法类似但作用的元素不同

  1. <body>
  2.     <div draggable="true"></div>
  3. </body>
  4.  
  5. </html>
  6. <script>
  7.     let div = document.querySelector("div");
  8.     div.addEventListener("dragend", () => {
  9.         console.log("dragend事件触发");
  10.     })
  11. </script>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/35447
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号