使用jQuery UI的draggable和droppable完成拖拽功能--介绍
第一部分--拖拽介绍
在https://code.csdn.net/2013ossurvey中最后一个开源项目就是zTree,一方面是因为自己看到有项目中使用了zTree,而已大家表示还不错。另外一方面,自己需要实现一个zTree不支持的复杂逻辑的拖拽功能。总体来说,我要实现的是一个可以拖拽的树形列表。当然最新版zTree也支持多课树之间的数据交互。当然一般的企业开发或者web开发中,使用到2个或3个数就足够了。太多了树形结构对于用户来说,也非常复杂。个人推荐不是非常复杂的需求都可以考虑使用zTree,因为它的授权许可是MIT,你可以自由获取,修改和分发给他人。
zTree多棵树之间的数据交互实例demo:http://www.ztree.me/v3/demo.php#_308
第二部分--功能需求。
1.父节点可以嵌套叶子节点,而已最好支持嵌套层数不显示,程序自动完成这个功能,或者在初始化的时候,开发人员传入一个指定的层级数目
2.父节点和叶子节点都可以拖动。说明:拖动父节点到右侧时,它包含的叶子节点都需要拖到右边
3.树形类表默认可以折叠,单击展开,再单击就折叠。
4.点击节点右侧的“删除”按钮可以删除列表里面的数据
大家参照上面的实例demo,可以看出我需要完成的功能。因为自己开始不知道有zTree这么成熟的控件,而已它确实不能完全满足我的需求,所以我需要从头开始完成这个功能。
项目中主要使用到jQuery UI里面的draggable和droppable,因为很多老的浏览器都不值html5的drag api。我自己也没有去查看zTree的源代码,所以也不知道zTree底层拖拽实现是否也是使用了jQuery UI的draggable和droppable方法。
同时因为zTree考虑到具体业务需求,对大数据处理时可以使用ajax方法,而我自己在实现,因为后台返回的数据是json格式,而且数据量不是非常的大,所以没有考虑着一块。
比较复杂的是,生成拖拽到右边列表的数据。zTree目前当然支持比较好的平行数据内容,而已在官方网站也说明,未来会加入保存数据的接口,或者通过form表单的形式发送到服务器。而我实际开发中,就是因为传入到后台的数据要求比较复杂,所以我就放弃了使用zTree控件。
完成最后的功能界面如下,完成通过拖拽数据到右边可以计算出符合条件的人数。
江西财经大学和“东华理工大学”是或的一个关系,而他们整体和”南昌航空大学“又是”且“的关系,当然也可以是”排除“关系。这里将实际项目简化了。点击江西高校,可以将下面所有的节点折叠起来。拖拽元素到右边,可以拖到一个单独的区域里面,也可以拖到一个已经存在节点的区域里面。就想上图中的关系。
点击确定需要把右边的树形结构数据保存下来。当然下次打开系统,必须通过反方法把右边的数据生成如图的结果。
第三部分--方案思路:
1.了解jQuery draggable和droppable方法和工作原理
2.递归思想
3.各个击破
4.熟练使用jQuery操作dom结构
第四部分--参考网址:
1.http://www.ztree.me/v3/main.php
2.http://jqueryui.com/draggable/
3.http://jqueryui.com/droppable/
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 本体入门(一):本体构建 101
- 大数据获取案例:Python网络爬虫实例
- 【pyspark】parallelize和broadcast文件落盘问题(后续)
- 【Tbase开源版测评】基于PostgreSQL的国产开源数据库初体验
- 聊聊RedisToken
- 【Ceph RGW】Bucket Sharding的设置
- 每日手撕一道算法-1143.最长公共子序列
- 理解JavaScript 中的执行上下文和执行栈
- Spring Boot 2.x基础教程:使用集中式缓存Redis
- 彻底理解 Cookie、Session、Token、JWT这些登录授权方法
- 本体入门(二):OWL 本体构建指南f
- LeetCode 刷题记录(三)
- LeetCode 刷题记录(二)
- Qt音视频开发11-ffmpeg常用命令
- 《SICP》读书笔记之一:构造过程抽象(上)