前言：前段时间负责公司的运营管理后台项目，通过运营后台的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" // 拖拽模块箱子到 => 可整理的箱子/ 垃圾箱子
垃
圾
箱
clone是指复制，sort：false是指不使用排序。代码中相关options属性的配置说明你可以参考教程中的说明去对应了解。我这里就不再重复赘述了。
一句话总结如果是简单的拖拽，建议用H5的draggable属性。
如果是复杂点的拖拽，建议用JQ-UI实现。
如果是数据驱动，用Vue-Draggable插件是很不错的选择。
一起交流?如果你有其它更好的想法想一起交流，请订阅微信公众号yhzg_gz(点击复制，在微信中添加公众号粘贴即可)与我联系，追求代码质量，高效率编程是我们共同的目标。
that"s all, 以上就是我目前所有的关于PC端项目拖拽经验的总结。觉得对你开发有帮助的可以点赞收藏一波，如果我哪里写错了，希望能指点出来。如果你有更好的想法或者建议，可以提出来与我交流。大家一起进步，共同成长。再次感谢[鞠躬]。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/92691.html
摘要：是一款在里可代替上传和下载的程序。在中支持直接拖拽上传的插件同时也支持和进行命令上传和下载。服务器上安装插件上传一个文件上传可以直接拖动，上传文件至当前目录。也可以用命令选择需要上传文件，一次可以指定多个文件。使用会弹出一个文件选择框。 lrzsz是一款在linux里可代替ftp上传和下载的程序。在linuxs...
摘要：在初步完成了在线流程图编辑工具之后又接到了在线搭建页面工具的需求刚开始其实并不想接项目因为从历史以及现实原因来看个性化及动态渲染都是很难解决的痛点各种页面搭建工具的不温不火早已说明了这条路并没有这么好走但从另一个方面来说既然有了这样的需求那 在初步完成了在线流程图编辑工具之后,又接到了在线搭建页面工具的需求,刚开始其实并不想接项目,因为从历史以及现实原因来看,个性化及动态渲染都是很难解决的痛...
摘要：至于如何优雅地管理使用，再次祭出潘神的文章手摸手，带你优雅的使用掘金项目的后端接口文档我是用的进行的管理，其实有很多强大的功能，不仅仅是一个接口测试工具，接口文档管理就是其中一个。 首先放个线上地址大家感受一下(由于后端用的是 leancloud 的免费套餐，因此可能会比较慢)： vue-data-board P.S. 建议大家尽量自己注册一个账号(可以随便填一个密码)，如果用默认的测...
摘要：页面布局是流程操作栏，工具箱流程组件，绘图区。关于这部分可以了解一下的流程拖拽方法，这里推荐大神张鑫旭的文章有了流程的模块，当然还需要线路的指向。 目前有很多公司都有工作流的产品。关于工作流的架构大致都是将工作流制定一个规范、标准数据模板，后台程序再解析这些数据模板。一些公司的工作流是数据库配置的，其实推荐将工作流可视化，这样就会节省人力和物力来读懂这些数据。关于流程可视化必然想到了在...
阅读 881·2021-11-22 13:53
阅读 2514·2021-10-15 09:40
阅读 983·2021-10-14 09:42
阅读 3399·2021-09-22 15:59
阅读 871·2021-09-02 09:47
阅读 2303·2019-08-30 15:54
阅读 1412·2019-08-29 17:14
阅读 373·2019-08-29 15:15
