可视化拖拽 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'><draggableclass="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/>箱<draggablev-model="templateJson.child":options="{group:'people'}"><div class="btn"></div></draggable>
</div>
<!--模块箱子-->
<div id="module"><draggableclass="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端项目拖拽经验的总结。觉得对你开发有帮助的可以点赞收藏一波,如果我哪里写错了,希望能指点出来。如果你有更好的想法或者建议,可以提出来与我交流。大家一起进步,共同成长。再次感谢[鞠躬]。
可视化拖拽 UI 布局之拖拽篇相关推荐
- vue拖动改变模板_可视化拖拽 UI 布局之拖拽篇
前言:前段时间负责公司的运营管理后台项目,通过运营后台的PC端拖拽配置布局,达到App首页模板的动态UI界面配置,生成页面.趁着周末,整理一下当时所了解到的拖拽.文章会根据大家的反馈或者自己学习经验的 ...
- unity 拖拽UI
我们经常会使用拖拽UI的效果,untiy 为拖拽事件也提供了现成的API,我们只要简单的实现几个接口即可 我们用两种方式来实现拖拽代码,一种是使用MonoBehaviour里的方法,一种是实现UI事件 ...
- unity3D如何实现2D sprite,3D物品和UI图片的拖拽效果
[Unity学习笔记] (一)如何实现2d sprite和3D物品的拖拽效果 1.调节camera >- Projection到Orthographic模式 Unity camera proje ...
- js 拖拽生成html,js拖拽插件 js 拖拽控件生成自定义表单 怎么实现
想请教一个js的问题,拖拽控件 js 拖拽控件生成自定义表单 怎么实现 说说步骤吧 监听mousedown事件 - 获取鼠标点击元素,判断是否可拖拽 - 设置flag做标记 - 建一个tempDOM, ...
- 设置拖拽事件,获取拖拽内容
设置dragEnter 设置DragDrop using System; using System.Collections.Generic; using System.ComponentModel; ...
- 拖拽删除元素、拖拽排序、拖拽预览图片和拖拽移动元素
介绍 HTML5 提供了专门的拖拽与拖放的 API,目前各浏览器都已支持,包括 IE.HTML 拖放(Drag and Drop)接口使应用程序能够在浏览器中使用拖放功能.例如,用户可使用鼠标选择可拖 ...
- iOS8开发~UI布局(二)storyboard中autolayout和size class的使用详解
一.概要:前一篇初步的描述了size class的概念,那么实际中如何使用呢,下面两个问题是我们一定会遇到的: 1.Xcode6中增加了size class,在storyboard中如何使用? 2.a ...
- iOS开发~UI布局(二)storyboard中autolayout和size class的使用详解
一.概要:前一篇初步的描述了size class的概念,那么实际中如何使用呢,下面两个问题是我们一定会遇到的: 1.Xcode6中增加了size class,在storyboard中如何使用? 2.a ...
- [专栏精选]UI布局
本文节选自洪流学堂公众号专栏<郑洪智的Unity2018课>,未经允许不可转载. 洪流学堂公众号回复专栏,查看更多专栏文章. 小新:"昨天不是说今天学习UI的布局嘛,啥时候开始呀 ...
最新文章
- CF533A Berland Miners
- 转载 load-on-startup的用法
- FOR ALL ENTRIES IN内表排序、排重对性能的影响
- 14门Linux课程,打通你Linux的任督二脉!
- bootstrap --- 标签页切换
- 100例Python代码带你从入门到进阶!
- 将PostgreSQL数据库扩展到每个月12亿条记录的经验教训
- 已经人均5G了?5G手机没人买,iPhone 11没5G该不该被嘲讽?
- [ python ] 多态
- MYSQL 索引事务日志概述
- C# 访问数据的时候报错 (拒绝了对对象 'XXXX' (数据库 'SHQY',架构 'dbo')的 SELECT 权限)...
- 链表的实现 -- 数据结构与算法的javascript描述 第六章
- 八种常规常用的SQL查询语句
- macbook设置充电上限
- Linux的nc,局域网文件互传
- 工具篇:Java中邮件类MimeMessage说明
- RuntimeError: Couldn‘t resolve requests
- 频域串联滞后校正matlab,控制工程基础(基于Matlab的线性系统串联校正)
- POSIX是什么有什么用
- element ui表单必填_element ui判断是否必填添加校验
热门文章
- 设置tomcat管理员的用户名和密码
- 计算机dns没有响应如何解决方案,dns未响应如何解决 dns未响应解决方法【图文】...
- python add configuration_idea 中add configuration
- ThreadLocal内存泄漏问题
- 设计模式之工厂方法模式学习笔记
- RxSwift技术路线与参考资料
- JavaScript中函数文档注释
- python-day22(序列化)
- Hystrix的一个坑,queue中的run方法没有被执行?
- iOS开篇——UI之UIStepper (计步器)