可视化拖拽 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插件是很不错的选择。

一块儿交流?

若是你有其它更好的想法想一块儿交流，请订阅微信公众号yhzg_gz(点击复制，在微信中添加公众号粘贴便可)与我联系，追求代码质量，高效率编程是咱们共同的目标。

that's all, 以上就是我目前全部的关于PC端项目拖拽经验的总结。以为对你开发有帮助的能够点赞收藏一波，若是我哪里写错了，但愿能指点出来。若是你有更好的想法或者建议，能够提出来与我交流。你们一块儿进步，共同成长。再次感谢[鞠躬]。