JS中鼠标拖拽div(onmousedown、onmousemove、onmouseup)

最新推荐文章于 2024-09-03 09:43:43 发布

Fantasc

最新推荐文章于 2024-09-03 09:43:43 发布

阅读量4.1k

点赞数 4

分类专栏： JS基础学习文章标签： javascript

本文链接：https://blog.csdn.net/Fantasc/article/details/119609210

版权

onmousedown：鼠标的按下事件

onmouseove：鼠标的移动事件

onmouseup：鼠标的松开事件

思路：

想实现鼠标拖拽div移动的效果，就得先获取到div，然后给div绑定鼠标按下的事件，在按下事件中绑定移动事件，在移动事件中将鼠标的坐标赋值给div即可实现div随鼠标移动而变换位置，但是只是这样的话，在鼠标松开之后div还是会跟着鼠标动，所以还要绑定鼠标松开的事件。在鼠标的送事件结束后，鼠标的一移动事件和松开事件就不需要在执行，需要执行就得出发鼠标按下事件，在最后得销毁移动和松开事件。

在绑定事件的时候注意，如果所有的事件都是绑定到div上，那么在拖动的过程中，如果鼠标在之后出现的元素中停下来，那么鼠标的松开事件将不会触发，因为那时鼠标在后出现的元素上，触发的是后出现的元素的鼠标松开事件。

练习代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"