vue拖拽 及固定元素位置

Question

如图，用vue实现拖拽，把元素拖到横线上固定位置，然后还可以从固定位置拖走，
另外 在不同的屏幕上，可能顶部下部或左边右边有一定的黑边，需要考虑到页面缩放比，
请高手提供下解决思路或者类似代码

Answer 1

拖动的话有两种，

1. 原生的
2. mousedown、mousemove、mouseup 模拟

当然也可以用一些三方库来实现。

然后就是吸附效果，可以判断重复面积，大于百分之五十就自动吸附，小于就不处理。

至于边界控制的问题，通过盒子限制就可以。

Answer 2

了解下drag drop事件，拖曳操作实际上是对元素，以及区域(另一个元素所在位置)进行操作。
而且你这种操作，不是拖动到随意位置，而是指定位置。
即便是拖曳到随意位置，也建议使用drag drop事件，而非mouse事件，无非是将操作的区域范围扩大而已。
很久之前看过两篇关于拖曳drag drop事件相关的文章，忘了。可以看看MDN，学习JS相关非常不错，也推荐给大家。
Drag and Drop API

Answer 3

前两天刚好做拖曳功能，刚好在这上面问过。你可以看看我提问的采纳回答及我自己的回答
https://segmentfault.com/q/10...