首页 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
资讯 业界资讯 软件杂谈 编程开发 网站建设 网络观查 搜索引擎 移动应用 网站运营 网络地图
开发 移动开发 Web前端 架构设计 编程语言 互联网 数据库 系统运维 云计算 开发杂谈
[Web前端] easyUI拖拽功能讲解以及多选拖拽的实现
easyUI拖拽功能讲解以及多选拖拽的实现

首先我们考虑这样一个业务场景:一个维修部门中分了N个维修组,维修部门的负责人需要将这个部门的维修人员分配到这些组里去。
当然,他可以选中一个维修人员,然后给他分配维修组,但是从人性化角度考虑,若利用拖拽是否更加的快捷和明确呢?
比如我们可以将维修组和维修人员都列出来,然后只需要将维修人员拖动到对应的组里即可完成分组。
另外,由于一个个拖还是太繁琐,还需要实现选中多个维修人员一起分组。那么我们下面一步步来,先实现单个的拖拽功能,再加入多选拖动支持~

单选拖动


首先,根据我们刚才描述的场景,简单设计一个布局:


接下来,我们需要做的是:
1、让维修人员对应的小方块可以拖动起来
这就需要把每个小方块都注册成draggable(这里我为每个小方块添加了class='employee'方便选择)
		$('.employee').draggable( {
			revert : true,
			proxy : 'clone',
			onStartDrag : function() {
				$(this).draggable('options').cursor = 'not-allowed';
				$(this).draggable('proxy').css('z-index', 10);
				$(this).draggable('proxy').addClass('dp')
			},
			onStopDrag : function() {
				$(this).draggable('options').cursor = 'move';
			}
		});

关于draggable中的属性设置,这里也讲解一下:
revert:true 表示当停止拖动后,小方块回归原位(false则不回归)
proxy:'clone' 表示拖动的那个元素,如果设置成clone,那么它会自动帮你clone一个元素用来给你拖动,如果要自己写的话,返回的必须是一个jQuery对象。这个在后面多选拖动的实现中会讲到。
onStartDrag 开始拖动时会触发,可以看到这里我们设置了一些视觉上的效果,比如添加一个不可防止的这么一个小角标,并且透明度变低(.dp)
onStopDrag 结束拖动时触发,还原角标
2、让小方块可以放置到上面的组里,并显示出来
那么首先需要把上面的组注册成droppable(这里为组的上一层ul添加了.group-list方便选择)
		$('.group-list li').droppable( { // 注意,这里要用li,不能直接用 .easyui-datagrid
			onDragEnter : function(e, source) {
				$(source).draggable('options').cursor = 'auto';
			},
			onDragLeave : function(e, source) {
				$(source).draggable('options').cursor = 'not-allowed';
			},
			onDrop : function(e, source) {
				var empno = $(source).find('p:eq(0)').html();
				var name = $(source).find('p:eq(1)').html();
				var phone = $(source).find('p:eq(2)').html();
				addEmployee(empno.split(':')[1], name.split(':')[1],
						phone.split(':')[1], $(this).find('[id^=group]'));
				$(source).parent().hide();
			}
		});

这里几个事件都比较好理解,看名字就可以了
onDragEnter: 当拖动的小方块进入时触发
onDragLeave: 当拖动的小方块离开时触发
onDrop: 当拖动的小方块进入后并放开鼠标时触发
当然,onDrop显然是最重要的,放开鼠标后我们需要将小方块代表的维修人员添加到对应的组中,也就是addEmployee(...)这个函数
	function addEmployee(empno, name, phone, dg) {
		var data = dg.datagrid('getData');
		function add() {
			data.total += 1;
			data.rows.push( {
				empno : empno,
				name : name,
				phone : phone
			});
		}
		add();
		dg.datagrid('loadData', data);
	}

这里的dg是通过小方块拖动放开的组来找到的,也就是onDrap函数中$(this).find('[id^=group]')来找的。这里有个小技巧,就是将组的id都命名成group开头,后面加一个组的编号,这主要是由于easyUI对非id访问元素的支持不是很好。
至此,单选拖拽就讲完了,你可以试试拖动小方块到维修组里试试~

多选拖动


下面开始讲解多选拖动,多选拖动的难点在于,如何选?最完美的方式当然是单击小方块后选中,然后一起拖到维修组中。
但是,单击小方块也会被认为是 拖动 而触发onDrapStart,而并不会触发onClick事件。
那么是否可以在小方块中添加一个多选框(checkbox)而不触发拖动事件?
我实践后发现由于在拖动时会clone出一个小方块并且覆盖在之前的小方块上,所以基本上点不到原来的小方块(快速点击倒是会成功,但是显然这种方案也不行)
而我之前做这个的时候用了一种方法,是利用了draggable的deltaX和deltaY两个属性,这两个属性的意思是clone出来的一个小方块相对于原来的小方块的位置
这样的话只要避免遮盖到checkbox就可以多选了!但是由于单击的时候会跳一下,这里并不推荐,有兴趣的朋友可以试试。
另外一种方法,就是将可拖动的小方块和多选框分开,这样一来就不会被遮挡了(为什么之前没想到 大哭
),下面就直接上代码了,大家可以和之前单选的对比着看
		$('.employee').draggable( {
			revert : true,
			proxy : function(source){
				if($(":checkbox:checked").length == 0){
					var clone = $(source).clone();
					clone.insertBefore($(source));
					return clone;
				}else{
					var div = $("<div/>");
					$(":checkbox:checked").each(function(){
						var clone = $(this).prev().clone();
						div.append(clone);
					});
					div.insertBefore($(source));
					return div;
				}
			},
			onStartDrag : function() {
				$(this).draggable('options').cursor = 'not-allowed';
				$(this).draggable('proxy').css('z-index', 10);
				$(this).draggable('proxy').addClass('dp')
			},
			onStopDrag : function() {
				$(this).draggable('options').cursor = 'move';
			}
		});

我这里将选中checkbox多选的和没选checkbox单选的这两种情况分开,这里唯一不一样的就是proxy属性
关于这个proxy其实就是在界面上clone一个代理小方块出来,用来拖动显示用,那么对于多选来说,我们首先需要克隆出选中的小方块,然后将小方块塞到界面中,然后需要将这些小方块返回给proxy。这里还有个问题就是,我尝试了很多次,只能返回jQuery对象,且不能是jQuery数组。所以只能搞个div然后把选中的小方块都塞到这个div里,最后会有一个一起拖着走的效果,当然这纯粹是为了效果好,用之前的proxy:'clone'也可以达到多选拖动的目的,只不过在拖动过程中的显示上只会出现最后拖动的那个小方块。
		$('.group-list li').droppable( { // 注意,这里要用li,不能直接用 .easyui-datagrid
			onDragEnter : function(e, source) {
				$(source).draggable('options').cursor = 'auto';
			},
			onDragLeave : function(e, source) {
				$(source).draggable('options').cursor = 'not-allowed';
			},
			onDrop : function(e, source) {
				if($(":checkbox:checked").length == 0){
					var empno = $(source).find('p:eq(0)').html();
					var name = $(source).find('p:eq(1)').html();
					var phone = $(source).find('p:eq(2)').html();
					addEmployee(empno.split(':')[1], name.split(':')[1],
							phone.split(':')[1], $(this)
									.find('[id^=group]'));
					$(source).parent().hide();
				}else{
					var li = $(this);	// 防止each里访问不到this
					var group = li.find('[id^=group]');
					$(":checkbox:checked").each(function(){
						var empno = $(this).prev().find('p:eq(0)').html();
						var name = $(this).prev().find('p:eq(1)').html();
						var phone = $(this).prev().find('p:eq(2)').html();
						addEmployee(empno.split(':')[1], name.split(':')[1],
								phone.split(':')[1], group);
						$(this).parent().hide();
						$(this).removeAttr("checked");
					});
				}
			}
		});

对于拖到维修组中放开鼠标后的处理也要分开讨论了,这个也比较好理解~
那就写到这里~下班回家!


 此文从网络中自动搜索生成,不代表本网站赞成被搜索网站的内容或立场    查看原文
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture 股票 租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2017年11日历
2017-11-18 23:50:26
 
  网站联系 软件世界网-www.sjsjw.com ©2014 蜀ICP备06016416号 三峰网旗下网站