【记】Vue - 拖拽元素组件实现
需求描述：
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:0:0:0.image “摘自useDraggable Function源码”) 在drag事件执行过程中会判断2个因素” style=“margin: auto” />
1.可拖拽元素：可拖拽元素通过draggable属性设置；
2.可放置的目标元素：默认情况下，浏览器会阻止在大多数 HTML 元素上放置某些内容时发生任何事情。要想目标元素变为可放置元素，该元素需要通过ondragover事件来阻止默认事件的发生。
即通过对拖拽元素本身和其父元素中添加ondragover事件
const prevent = (evt: DragEvent) => {evt.preventDefault();evt.dataTransfer.dropEffect = 'move'
};
dragContainerRef.value.addEventListener('dragover', prevent);
dragContainerRef.value.parentNode.addEventListener('dragover', prevent);
2.TouchEvent实现移动端拖拽功能
移动端拖拽可通过TouchEvent事件监听（ontouchstart、ontouchmove、ontouchend）
3.元素随光标移动实现
在按下元素后记录鼠标相对元素的位置，在之后的光标移动过程中修改元素的位置使其始终保持和光标的相对位置。
代码实现：
效果演示：
<template><Drag-Elem class="drag-btn" :snapEdge="true"><button @click="onClick">
【记】Vue - 拖拽元素组件实现相关推荐
- vue 拖拽元素到任意位置
vue 拖拽元素到任意位置 使用vue-drag-it-dude组件 npm install vue-drag-it-dude --save 参考地址:https://github.com/xzqyu ...
- vue拖拽排序 组件
vue拖拽排序 组件 npm install vuedraggable -S vue.draggable中文文档 组件代码 <template><div><div cla ...
- Vue 实现拖拽模块(一)拖拽添加组件
本文主要介绍了vue拖拽组件实现构建页面的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下 本文主要介绍了 Vue拖拽添加组件的简单实现,具体如下: 效果图 实现思路 使用 H5 的新特性 ...
- vue 悬浮按钮_Vue@哇！几行代码实现拖拽视图组件
概述 最近开发的项目中有一个分享的悬浮按钮,这个按钮遮挡了页面信息,产品经理跑过来问我,是否可以把这个按钮做成可以拖拽的,研究了一下轻松实现了这个功能,这里分享给大家.这个项目是基于vue的公众号网页 ...
- vue实现拖拽的组件
<1> 安装 通过NPM安装 $ npm install awe-dnd --save 插件应用 在main.js中,通过Vue.use导入插件 import VueDND from 'a ...
- 简单使用vue拖拽组件vue3-dnd
项目中需要使用到拖拽,这里使用vue3-dnd来满足需求 这里项目使用的vue3(使用js而非ts) 插件官网地址:Vue3 DnD 安装 npm install vue3-dnd react-dnd ...
- Vue拖拽组件开发实例
为什么选择Vue? 主要原因:对于前端开发来说,兼容性是我们必须要考虑的问题之一.我们的项目不需要兼容低版本浏览器.项目本身也是一个数据驱动型的.加之,Vue本身具有以下主要特性: 使用虚拟DOM: ...
- 最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云
本文首发:<最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云> Vue 拖拽组件库(drag-and-drop)组件在使用 Vue 框架开发中非常常见的需求,做个内容行排序,拖拽小组件 ...
- VUE 拖拽组件 vue.draggable
中文文档 https://www.itxst.com/vue-draggable/tutorial.html 安装 npm i -S vuedraggable 属性 属性名称 说明 group :gr ...
最新文章
- python绘制条形图用什么函数_Python绘制正余弦函数图像完整代码
- 贾珈：自然语言处理中9个不可不知的研究热点（附视频）
- python括号匹配算法_使用Python的栈实现括号匹配算法
- 多线程：happens-before原则
- 4、mybatis主配置文件之typeAliases
- 四十六、深入Java的网络编程（下篇）
- Android开发之git命令创建tag提交远程仓库的方法(图文教程)
- esp32的GPIO操作
- C++ 预处理与宏相关编程（#，##等等）
- Opencv--copyTo()函数的使用方法
- easyui 修改单元格内容_jquery easyui datagrid实现增加，修改，删除方法总结
- 13数据库表空间回收
- 线程池Executor框架解读
- 选择IT行业的自我心得，希望能帮助到各位！（一）
- kali2020出现中文乱码解决
- matlab制作水印,怎么在含有水印的图像中提取出水印
- vector中push_back和emplace_back区别
- debian9.12的硬盘安装过程一
- 修改电脑配置的方法(被骗之后才学会的)
- 理解：iOS开发中锁的实现原理
热门文章