可视化拖拽 UI 布局之拖拽篇

前言：前段时间负责公司的运营管理后台项目，通过运营后台的PC端拖拽配置布局，达到App首页模板的动态UI界面配置，生成页面。趁着周末，整理一下当时所了解到的拖拽。文章会根据大家的反馈或者自己学习经验的累积成长不定期更新丰富。如果你想了解更多PC端的拖拽开发，欢迎点赞关注或者收藏一波[鞠躬]。

之前在掘金一篇文章里看到这段话:

UI 开发的三种模式

1.手写标签和样式代码，生成页面

2.可视化拖拽 UI 组建，生成页面

3.直接输入设计稿，输出可用页面

有幸当前公司处于UI开发的第二阶段

当时开发参考过的小部分网站，其它参考过的大量网站由于电脑硬盘出现故障丢失了无法恢复。

以上网站这些不是很重要，真正重要有用的网站链接我已经帮你筛选整理出来了，并贴在下面的文章里面(分为演示与教程两类)，点击相关链接即可进入相关开发学习。

贴上面网站的原因是我想告诉大家，插件选型之前一定要先整理好自己的需求，根据需求在网上寻找插件，并且打开控制台，看看效果是不是你所需要的类型，否则下载到本地后调试了半天发现最后不能达到自己想要的效果，这样既浪费时间又浪费精力，就得不偿失了。所以，我之后有时间会整理一套插件选型筛选的思维导图出来，到时发到掘金或者个人公众号，大家一起分享进步。

好了，言归正传，我们开始上主菜：

拖拽程度的层次

就我搜索到的资料来看，拖拽的程度是分为三类的，如果你有知道的其它类型，欢迎与我交流分享。

1.视图上的拖拽

比如这个：

通过定位来改变顺序，注意看控制台的节点位置，并没有发生对应的改变。这种拖拽仅仅是视图交互上的效果，也是最最简单程度效果的拖拽。

链接：

JS-Demo演示地址

2.视图与节点同步变化的拖拽

2-1 JQ-UI

比如这个：

请注意看控制台的节点位置，发生了对应的改变。这种拖拽是能达到视图与节点的同步变化的效果。

链接：

演示：JQ-UI-Demo演示地址

教程：JQ-UI中文API文档教程

2-2 H5-draggable

比如这个：

h5提供的draggable属性，请注意看控制台的节点位置，也发生了对应的改变。

链接：

演示：Demo演示地址

教程：张鑫旭-draggable教程

2-3 JQ-UI与H5-draggable的取舍问题

JQ-UI和H5-draggable属性都能达到我们想要的效果，那我们应该选择哪个呢？个人而言，最后还是选择了JQ-UI(当然重构我们改用了vue)。主要考虑的地方是灵活性，JQ-UI优于H5-draggable属性的地方正是在于灵活性。draggable属性里面方法封装的比JQ-UI相对而言比较固定，不好调整。所以，以我的经验来看，如果你是简简简单的小需求的拖拽，draggable的属性绝对能够满足你；但如果你的拖拽需求比较复杂，那么我建议你用JQ-UI会比较好点。

3.数据，视图，节点的三者同步变化

比如：这个

vue插件Vue-Draggable，也是vue相关拖拽插件中的star最多的，配置项也最丰富的。

链接:

演示：Demo演示地址

教程：github-vue-draggable

教程：github-vue-Sortable(draggable插件是基于sortabl二次封装的，多看看这篇对使用draggable会有很大的帮助)

项目实践

重构的时候我们是用vue的，选择了这个draggable插件，后面事实证明也是正确的。”花了比用JQ至少少一半的时间就达到了相同的效果”。毕竟Vue只需要考虑数据关注业务流程而不需要考虑节点的操作问题，这点还是非常不错的。反正谁用谁知道[吐舌]。好了，我们贴出代码说明：

// 引入组件
import draggable from 'vuedraggable'

// 拖拽模块箱子到 => 可整理的箱子/ 垃圾箱子
<!--可整理的箱子-->
<div id="sortable" class='block'>
  <draggable class="sortable" v-model="templateJson.child" // 设置接收的拖拽 :options="{group:'people'}" @remove="stop">
    <module-template :item="item" :type="templateData.type" v-for="(item, $index) in templateJson.child" :key="$index">
    </module-template>
  </draggable>
</div>
<!--垃圾箱子-->
<div id="dusbtin">
  <br/>垃<br/>圾<br/>箱
  <draggable v-model="templateJson.child" :options="{group:'people'}">
    <div class="btn"></div>
  </draggable>
</div>
<!--模块箱子-->
<div id="module">
  <draggable class="dragArea" v-model="moduleJson.child" :clone="clone" // 开始拖拽的箱子的options选项配置 :options="{group:{ name:'people', pull:'clone', put:false },sort:false}" @end="onEnd">
    <module-template :item="item" :type="templateData.type" v-for="(item, $index) in moduleJson.child" :key="$index">
    </module-template>
  </draggable>
</div>

clone是指复制，sort：false是指不使用排序。代码中相关options属性的配置说明你可以参考教程中的说明去对应了解。我这里就不再重复赘述了。

一句话总结

如果是简单的拖拽，建议用H5的draggable属性。

如果是复杂点的拖拽，建议用JQ-UI实现。

如果是数据驱动，用Vue-Draggable插件是很不错的选择。

that’s all, 以上就是我目前所有的关于PC端项目拖拽经验的总结。觉得对你开发有帮助的可以点赞收藏一波，如果我哪里写错了，希望能指点出来。如果你有更好的想法或者建议，可以提出来与我交流。大家一起进步，共同成长。感谢[鞠躬]。

一起交流?

你有好的想法可以一起交流，订阅微信公众号yhzg_gz(点击复制，在微信中添加公众号粘贴即可)，追求代码质量，高效率编程是我们共同的目标。

写文章可以得异步社区的书！爱读书的技术人都在异步社区。我想要读CSS世界，希望你也能够喜欢。参与写作换书活动。