【记】Vue - 拖拽元素组件实现

最新推荐文章于 2024-06-13 10:31:02 发布

AIGC小陈

最新推荐文章于 2024-06-13 10:31:02 发布

阅读量2.1k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_53312997/article/details/127386910

版权

需求描述：

1.可实现PC/移动端元素拖拽移动
2.支持2种模式：1.元素跟随光标点放置2.元素在光标点平齐位置靠侧边吸附

市面上估计有很多这种组件和功能了，但我没找到合适的，用了VueUse的useDraggable Function感觉不太适合某些应用场景（比如需要拖拽的点击button），故自己手动实现了一下，此次实现也算是对事件处理以及元素定位的相关属性有了比较深入的了解了，仅以本文记录一下。也欢迎大佬们批评指正。

实现思路：

整体思路

1.组件元素包括三部分：1.移动容器2.可拖拽元素3.操作元素

移动容器包裹可拖拽元素和操作元素，且可拖拽元素和操作元素在页面中二者只显示其一。当props.snapEdge === false时，可拖拽元素和操作元素为同一个，通过default slot传入；当props.snapEdge === true时，可拖拽元素为snapEdge slot传入的元素，操作元素为default slot传入的元素。

2.拖拽可拖拽元素，可以放置整个移动容器的位置，支持2种方式：1.在光标所在处放置容器2.在光标所在平齐处放置元素靠侧边吸附

两种方式切换通过props.snapEdge设置。

细节思路

1.DragEvent实现PC端拖拽功能

PC端拖拽可通过DragEvent事件监听（ondragstart、ondragend）【为什么不用MouseEvent（onmousedown、onmousemove、onmouseup、……），主要考虑是为了防止和内部元素的click事件冲突。vueuse中的useDraggable Function就存在这个问题，useDraggable Function源码中是通过PointerEvent事件监听，而PointerEvent是继承自MouseEvent，对其源码感兴趣的可转以上链接】 <img src=“https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d9a6374e4c49209a6dd307d3513479~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536: