Jquery 自定义拖动元素四处跳跃

很明显，我在鼠标光标和元素偏移量上做了一些令人不快的计算，但我不知道是什么。为什么元素会跳这么多？目标是能够拖动元素，但我需要它保持相对于鼠标的位置，即不要捕捉到光标。此外，我实际上希望能够使用父元素进行拖动，如果这样做有意义的话，正如代码中所反映的那样。可以拖动父容器以移动目标

此外，我意识到还有其他需要改进的问题，比如拖出页面等，但这个问题的目的是解决来回跳跃的问题

设scaleX=1； 设scaleY=1； 设x=0； 设skewY=0； 设translateX=0； 设translateY=0； 让isPanning=false； 设$map=$'map'； 让$container=$'mapCanvas'； 函数移动映射{ $map.css{ 变换：`矩阵${scaleX}，${skewX}，${skewY}，${scaleY}，${translateX}，${translateY}` }; } $container.onmousedown，functionevent{ isPanning=true； }; $container.onmouseup，functionevent{ isPanning=false； }; $container.onmousemove，functionevent{ 如果我计划{ translateX=event.pageX+event.pageX-$map.offset.left； translateY=event.pageY+event.pageY-$map.offset.top； 移动地图； } }; 地图画布{ 位置：绝对位置； 左：0；右：0；顶部：0；底部：0； 用户选择：无； } 地图{ 宽度：100px； 高度：100px； 文本对齐：居中； 线高：100px； 边框：1px纯黑； 颜色：黑色； } 拖我

---

我肯定你先看了片段。。。如果没有，我们现在就做

那么你的代码出了什么问题

mousemove是一个机关枪事件。 它像地狱一样燃烧！因此，在触发事件后，您必须更新全局变量，然后调用moveMap函数。。。与此同时，mousemove已经再次开火了。。。完全搞砸了计算。对于一个浏览器来说，一毫秒是一个很好的时间，我几乎不夸张

为了避免计时问题，只需将事件传递给函数。或者直接在事件处理程序中使用函数。为什么需要一个不同的命名函数呢

第二件事。。。您必须知道鼠标相对于可拖动元素的位置，才能获得所需的平滑拖动效果。计算中使用的图元的位置位于左上角。但也许鼠标在dragStart的右下角附近。。。你必须知道。这只能从mousedown事件中扣除

喜欢拖拉

设scaleX=1； 设scaleY=1； 设x=0； 设skewY=0； //设translateX=0；//不需要全球化 //设translateY=0； 让isPanning=false； //用于存储鼠标相对于图元位置的偏移的附加对象 让鼠标对元素； 设$map=$'map'； 让$container=$'mapCanvas'； 函数moveMapevent{ 让translateX=event.pageX-鼠标与元素.X 让translateY=event.pageY-鼠标与元素.Y //console.logtranslateX，translateY $map.css{ 变换：`矩阵${scaleX}，${skewX}，${skewY}，${scaleY}，${translateX}，${translateY}` }; } $container.onmousedown，functionevent{ isPanning=true； //在开始时获取可拖动元素的位置 让元素_pos=event.target.getBoundingClientRect //相对于该元素的鼠标位置 鼠标与元素={ X:event.pageX-元素位置左侧， Y:event.pageY-元素位置顶部 } }; $container.onmouseup，functionevent{ isPanning=false； //很明显，optionnal实际上是一个很好的做法 鼠标\u vs_元素={} }; $container.onmousemove，functionevent{ 如果我计划{ 移动地图事件； } }; 地图画布{ 位置：绝对位置； 左：0； 右：0； 排名：0； 底部：0； 用户选择：无； } 地图{ 宽度：100px； 高度：100px； 文本对齐：居中； 线高：100px； 边框：1px纯黑； 颜色：黑色； } 拖我

---

非常感谢。看起来很棒。但对于全局性，如果我需要从另一个函数（如缩放）设置变换，该怎么办？这就是为什么我要全局跟踪所有变量。建议？很明显，我不是一个程序员…好吧。。。。如果您在其他地方需要，请将其保持在全球范围内。但是在moveMap函数中设置translatex和translateXY。