拖拽元素把鼠标按下，移动，抬起全绑定到被拖动元素上为什么存在bug

最新推荐文章于 2022-07-06 09:28:59 发布

一叶知秋9307

最新推荐文章于 2022-07-06 09:28:59 发布

阅读量1.9k

点赞数

分类专栏：问题文章标签： js

本文链接：https://blog.csdn.net/qq_40285497/article/details/83006348

版权

在实现JavaScript拖拽元素功能时，遇到一个bug：缓慢移动时正常，但快速移动鼠标会导致鼠标超出元素范围。问题出现在鼠标按下、移动和抬起事件的绑定上。当sign变量标记拖动状态并根据鼠标位置计算元素位置时，快速操作导致元素位置更新跟不上鼠标移动，从而出现鼠标超出元素的情况。寻求解决方案。

摘要由CSDN通过智能技术生成

思路是：

1.鼠标在被拖动元素（item）按下时，sign=true，并且获取鼠标初始位置和元素初始位置；

2.鼠标在item抬起时，sign=false

3.鼠标在item移动时，如果sign==true时接着执行；根据鼠标当前位置减去鼠标初始位置，获得位置差；改变元素位置为初始位置加上位置差；

然后就出现了一个问题，慢移动没有问题，快速移动时鼠标跑出元素？？？

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            position: relative;
            height: 500px;
        }
        .item{
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: green;
            color: #000;
            user-select: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">

最低0.47元/天解锁文章

一叶知秋9307

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
拖拽元素把鼠标按下，移动，抬起全绑定到被拖动元素上为什么存在bug

思路是：1.鼠标在被拖动元素（item）按下时，sign=true，并且获取鼠标初始位置和元素初始位置；2.鼠标在item抬起时，sign=false3.鼠标在item移动时，如果sign==true时接着执行；根据鼠标当前位置减去鼠标初始位置，获得位置差；改变元素位置为初始位置加上位置差；然后就出现了一个问题，慢移动没有问题，快速移动时鼠标跑出元素？？？代码如下&lt;...
复制链接

扫一扫

专栏目录