Javascript Vue2：如何获得平滑的鼠标移动？

我对使用vue进行交互元素还不熟悉，但我在d3方面有经验。 拖动时，我很难获得DOM元素的预期行为

我希望单击并移动鼠标并在鼠标下保持元素的位置，而不是跳到左上角而不闪烁

我读过其他几篇文章，但都找不到一个例子或答案

我尝试了pageX/Y offsetX/Y clientX/Y的组合，但没有效果

注意：在我的实际应用程序中，我正在通过@.native尝试一个组件，但在这里，即使没有它，我也无法让它工作

新Vue{ el:“应用程序”， 数据：{ x:100， y:100， 拖动：false }, 方法：{ 星条旗{ this.draging=true； }, 阻力{ this.draging=false； }, 多德拉格事件{ 如果这是一个拖拽{ //设style=this.$refs.obj.$el.style this.x=event.clientX this.y=event.clientY } } }, 计算：{ 风格{ 返回{ 左：`${this.x}px`， 顶部：`${this.y}px`， 位置：'绝对' } } } }; obj{ 宽度：50px； 高度：50px； 背景颜色：珊瑚； } {{拖动}}:{{x}，{{y} {{style}}

---

第一件事-我强烈建议您不要关注元素的移动，而是关注所有页面上的指针：

mounted () {
  document.addEventListener('pointermove', this.doDrag.bind(this))
},
destroyed () {
  document.removeEventListener('pointermove', this.doDrag.bind(this))
}

---

另外，请将坐标更改为{left:this.x-${HALF_OF_ELEMENTS_SIZE}px}

您尝试过应用CSS转换吗？试着这样做：过渡：所有2到0@SimonHyll感谢您的投入。缓和过渡有帮助，但不能解决左上角的问题我很感激答案，但。。。1.不起作用。2.将事件添加到文档中正是我在寻找与vue相关的方法和3。元素大小的一半有点粗糙，并不能解决问题的核心——保持鼠标在元素中的相对位置，因为你只是将其水平居中。对了，这只是给你一些提示。下面是完整的示例：]这里只有一件事-如果您将事件侦听器绑定到元素，那么如果您移动得足够快，则将触发pointerup。感谢codesandbox，但我无法移动它，即使是以最慢的速度。。。多快才算足够快？有时我也会拖动图像，例如将其放到桌面并下载文件，而不是元素….+1，能够修改图像以使其工作所需的指针事件：无；在img上，但我仍然希望您能找到一种不用document.addEventListener的方法