前端拖拽布局

文章目录

• 前言
• SortableJS
• vuedraggable
• vue-draggable-resizable
• vue-drag-resize
• vue-draggable-resizable-gorkys
• vue-grid-layout
• 手撸拖动布局
• 总结

前言

抽了两天空闲时间玩了一下拖拽布局，用的少有点生疏，通过学习熟练一下各种拖拽事件。
主要有列表拖拽、表格拖拽、表单拖拽、自定义拖拽布局等，本文会使用开源库来实现这几种拖拽，自定义布局中也可以手撸代码。

我的demo演示地址：http://121.4.85.237:9999/

SortableJS

SortableJS开源库是最基础的一个开源库，vue，react等项目中使用时又基于此开源库进行了二次封装，这个后面再说。
此库可以实现列表、表格与表单拖拽等，具体的可以去GitHub官网看。怎么使用也可以去官网看，库的使用简单没啥说的。

GitHub地址：github.com/SortableJS/…

vuedraggable

此开源库基于并提供 Sortable.js 的所有特性，推荐在vue项目开发时使用此库。
开发中列表与表单的拖拽等经常使用此库，怎么使用直接看官网最直接。

GitHub地址：github.com/SortableJS/…

我在demo中使用此库写了一个表格的拖拽，功能有表头的列拖拽与tbody中的行拖拽。在写表头列拖动排序时，tbody中的列内容没有跟着移动，参考官网demo才解决的，大家可以试着写一下，边看边敲加深印象。

vue-draggable-resizable

此开源库主要是用于拖拽布局，适用于低代码布局；如网站首页中的卡片拖拽，进行首页布局。
这个库的使用相对简单，在一个容器中拖动元素等操作，我感觉是使用绝对定位布局的，所以会缺少一些功能。使用方法去官网自行学习。

Github地址：github.com/mauricius/v…

• .具有功能：拖动元素进行布局，拉伸缩小元素等；
• 功能缺陷一：没有进行碰撞检测，就是元素可重叠；
• 功能缺陷二：没有元素对齐吸附效果，但是暴露了一个参数，可进行网格吸附布局，我玩了下发现网格绘制需自己绘制！

vue-drag-resize

这个库和上面的vue-draggable-resizable实现的功能一摸一样，我搞不清楚是谁抄袭的谁还是有什么不同点，反正我没看出来。只有个别参数名字不一样，但是具有的功能一摸一样。

Github地址：www.npmjs.com/package/vue…

vue-draggable-resizable-gorkys

此库我看是一个大佬fork的vue-draggable-resizable库，再在此基础上进行的二次封装，添加了没有的碰撞检测与元素吸附功能，但是还是感觉有所不足。

Github地址：github.com/gorkys/vue-…

• 碰撞检测功能：实现相对简单了一些，就是做了一层数据处理，判断当正在拖动的元素与其它元素产生重叠时，鼠标松开后会回到起点位置。额，这个感觉有点不完美，但是我觉得也很牛了，我知道不是很完美我也没有更好的其它实现方法，太菜了只能跟着大佬屁股后面学习。
• 元素相互吸附：这个也是做了元素检测，当元素多的时候感觉拖动的有点卡顿效果。我觉得网格吸附更好一些。
• 碰撞检测的实现可以去看这位大佬敲的代码，不难理解，网址：github.com/gorkys/vue-…

vue-grid-layout

这个开源库我很喜欢，实现的效果太牛了，完美实现碰撞检测与网格吸附功能，并且操作看起来很顺滑。

官网地址：jbaysolutions.github.io/vue-grid-la…

• 局限性：容器高度不能固定，可以使用元素无限叠高。当你的需求没有高度限制时，或者可以使用滚动高度时，就用它，使用很简单，简单效果可以看我的demo。
• 网格需自绘：不自带网格样式，需自己绘制。并且绘制网格要自己计算每个格的大小，最好计算到很精准的数字。当然也可以不胡绘制网格，绘制网格只是看起来更好看一些。

手撸拖动布局

我自己手撸了一个拖动布局，当然不是vue-grid-layout这种，这种我是没有任何思路的，我撸的和vue-draggable-resizable类似的一种布局。
主要实现方式就是拖拽事件和鼠标监听事件相结合，计算位置坐标，主要是使用的绝对定位布局。效果我也放在了demo中，大家都可以尝试自己撸一下，对自己看别人拖拽的源码理解很有帮助。

总结

拖拽布局这个玩意开发中可以不用，但不能不知道怎么使用，这几个开源库差不多够用了。要是能把这库的源代码吃透，你就是老大哥。小东西拖拽推荐使用vuedraggable，大格局布局就vue-grid-layout，项目有特殊需求就手撸它。