使用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/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯移动品质中心TMQ的专栏

基于 hook 和 gmock 开展单元测试

单元测试又称为模块测试,是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中,一个单元就是单个程序、函...

95420
来自专栏腾讯数据库技术

Linux调度原理介绍和应用(前篇)

38640
来自专栏杨建荣的学习笔记

一个95后开发者关于消息发送的实践

这篇文章最开始投给我的时候,没有引起太多的重视,但是看了内容之后,真是被里面的细节吸引了。

11100
来自专栏Python中文社区

用Python实现微信接口(二)

專 欄 ❈爱撒谎的男孩,Python中文社区专栏作者 博客:https://chenjiabing666.github.io ❈ 群消息 增加了三个键值,如下...

1.4K80
来自专栏大数据挖掘DT机器学习

使用Python编写网络爬虫抓取视频下载资源

Python因为其强大的字符串处理能力,以及urllib2,cookielib,re,threading这些模块的存在,用Python来写爬虫就简直易于反掌了。...

76160
来自专栏数据小魔方

R语言网络数据抓取的又一个难题,终于攻破了!

单纯从数据抓取的逻辑来讲(不谈那些工程上的可用框架),个人觉得R语言中现有的请求库中,RCurl和httr完全可以对标Python中的urllib和reuqes...

44030
来自专栏Python小屋

Python计算前n个自然数的阶乘和

本文来源于粉丝私信的问题,目的在于计算result = 1!+2!+3!+...+n!,因为代码比较简单,没加注释,有问题可以留言交流。文中给出了2段代码,在实...

50650
来自专栏轮子工厂

1. C语言的第一个程序

(。・∀・)ノ゙嗨!大家好,我是呆博~很开心可以在这里给大家分享我的 C 语言学习笔记~

21740
来自专栏Python学习心得

​Python爬虫--- 1.5 爬虫实践: 获取百度贴吧内容

原文链接:https://www.fkomm.cn/article/2018/7/22/21.html

12200
来自专栏大数据

python3.6抓取100知乎用户头像详解(四)

因公众号编辑器对代码不友好 在手机上阅读体验不佳 建议前往文末我的知乎文章链接 目标:抓取知乎最高点赞者的关注者的头像,并下载于本地文件夹。 我们采用:requ...

32470

扫码关注云+社区

领取腾讯云代金券