JavaScript鼠标拖动事件监听使用方法以及实例效果演示

更新时间：2023年05月04日 10:50:57 作者：a辰龙a

最近工作中遇到了鼠标拖动事件监听的相关需求,所以下面这篇文章主要给大家介绍了关于JavaScript鼠标拖动事件监听使用方法以及实例效果演示的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

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

<body>
    <!-- 设置draggable为true -->
    <div draggable="true"></div>
</body>

drag事件

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

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

dragstart事件

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

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

dragenter事件

当正在拖拽元素的鼠标进入监听元素时触发事件，需要注意的是此监听事件需要赋在被进入的元素上，事件源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事件触发");
        e.target.style.backgroundColor = "green"
        console.log("颜色改变");
    })
</script>

dragleave 事件

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

<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事件触发");
        e.target.style.backgroundColor = "green"
        console.log("颜色改变");
    })
</script>

dragover 事件

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

<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事件触发");
    })
</script>

drop事件

该事件需要配合dragover使用，在dragover事件中给event调用.preventDefault()方法，当鼠标在监听元素内停止拖拽时就会触发同样监听该元素的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事件触发");
        e.preventDefault()
    })
    div.addEventListener("drop", () => {
        console.log("drop事件触发");
    })
</script>

dragend事件

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

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

总结

到此这篇关于JavaScript鼠标拖动事件监听使用方法以及实例效果演示的文章就介绍到这了,更多相关js鼠标拖动事件监听使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js中判断Object、Array、Function等引用类型对象是否相等
项目中有时会需要对引用类型进行比较，如常见的object和array，我们知道，引用类型无法直接使用 == 或=== 取得期待结果，因此需要一个迭代的compare函数转化成原始类型进行比较
2012-08-08
微信小程序实现搜索商品和历史记录的功能
这篇文章主要为大家详细介绍了微信小程序实现搜索商品和历史记录的功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
根据表格中的某一列进行排序的javascript代码
根据表格中的某一列进行排序的实现方法有很多，下面为大家介绍下如何使用js来简单实现下，需要的朋友不要错过
2013-11-11
微信浏览器下拉黑边解决方案 wScroollFix
这篇文章主要介绍了微信浏览器下拉黑边解决方案 wScroollFix,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-01-01
很多人都是用下面的js刷新站IP和PV
有人用JS做网站跳转,也有人用很多其他作弊的方法,今天又发现有太多的人用这样的方法实现两个站的IP共享,把http://www.jb51.net替换成自己的站
2008-09-09
JSON.stringify实例详解以及灵活运用
在向服务器发送数据时一般是字符串,我们可以使用 JSON.stringify()方法将JavaScript对象转换为字符串,下面这篇文章主要给大家介绍了关于JSON.stringify及灵活运用的相关资料,需要的朋友可以参考下
2022-03-03
浅析ES6与CommonJS中模块的用法对比
ES6 的模块化汲取了 CommonJS 和AMD 的优点,拥有简洁的语法和异步的支持,并且写法也和 CommonJS 非常的相似,下面我们就来看看二者用法的差异吧
2023-09-09
第一次接触神奇的Bootstrap导航条
第一次接触神奇的Bootstrap导航条，Bootstrap让Web开发更迅速、更简单，感兴趣的小伙伴们可以参考一下
2016-08-08
AutoJs实现刷宝短视频的思路详解
这篇文章主要介绍了AutoJs实现刷宝短视频的思路详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-05-05
原生js获取元素样式的简单方法
下面小编就为大家带来一篇原生js获取元素样式的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08