前端组件拖拽以及自定义组件布局demo(基于vue2实现) | 您所在的位置:网站首页 › 前端拖拽框架怎么设置 › 前端组件拖拽以及自定义组件布局demo(基于vue2实现) |
这篇文章简单介绍前端(vue)里组件拖拽以及拖拽完成以后组件自定义排列的的写法。主要介绍思路以及实现方式。组件的放大缩小以及拖拽借助一个不错的插件
vue-grid-layout git文档:https://github.com/jbaysolutions/vue-grid-layout/blob/master/README-zh_CN.md 这个插件定义的某一个元素的宽高是利用倍数计算宽高以及位置,在使用的时候可以自己先去定义一个栅格的背景,我做的是12格,通过javascript动态计算每一个元素占总宽度的百分比。下方图片展示 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201216175651706.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzM1NzI4,size_16,color_FFFFFF,t_70 这个栅格布局是利用css的背景渐变实现(linear-gradient) 组件使用需要详细的看文档,下边我列一下代码片段 到这里就完成了栅格布局以及栅格内的元素拖拽以及放大缩小 下边介绍从左侧列表内拖拽组件在右侧栅格布局内展示 不借助插件,因为用插件可能会造成冲突(猜测,没有测过),有一款拖拽插件,有兴趣可以试一试 => vuedraggable思路1.首先要利用鼠标事件 鼠标按下事件 onmousedown 鼠标移动事件 onmousemove 鼠标抬起事件 onmouseup 2.鼠标按下时,确定按的是列表的哪个元素,获取到对应的数据,鼠标按下事件实在当前元素的身上。 3.鼠标按下时,这时如果要拖拽,那这时鼠标移动事件就得是全局的了,因为要把元素拖到栅格容器内,要在window上操作onmousemove,那么能拿到鼠标距离屏幕左侧以及上边的距离,也就是x轴和y轴的坐标点,那么这时拖动的并不是当前在dom结构里的元素,而是一个定位的元素(需要页面上有一个隐藏的定位元素,拖拽的时候显示),这时要把你拿到的数据,赋值给到定位的数据,把鼠标的距离,也就是保存的坐标点赋值到定位元素的top,和left。如下图: ![]()
|
CopyRight 2018-2019 实验室设备网 版权所有 |