首页 日常生活 社交礼仪 美容健身 电脑网络 手机技巧 电子数码 废物利用
首页 > 电脑网络 > 电脑常识 > jQuery插件:非HTML 5列表拖动排序插件详情

jQuery插件:非HTML 5列表拖动排序插件

  • 2016-01-04 19:59:18
  • 阅读:...

算是插件吧,严格意义上讲不算jQuery插件,惯例支持AMD模式,没有采用HTML 5的拖动接口,也没啥亮点就是简单实现了基础的功能。先睹为快查看demo

快速开始

dragSort({ $wrap: $('#drag-1') });

标准用法

dragSort({
	$wrap: $('#drag-2'),
	drag: 'li',
	ignore: 'input, textarea',
	chosenClass: 'cur-item',
	moveClass: 'cur-move',
	zIndex: 3,
	dragCallback: function(evt) {
		console.log('正在拖动,实例为:');
		console.log(this);
		console.log('事件对象:');
		console.log(evt);
	},
	dragendCallback: function() {
		console.log('拖动已结束');
	}
});

参数说明

  1. $wrap: 必要参数,拖动元素父级

  2. drag: 拖动元素,默认为'>*'表示$wrap的子元素,若不为空会根据$wrap.find(drag)的方式来确定;注:table.find('>*')不一定是tr

  3. ignore: 拖动元素中哪些子元素不能实现拖动,默认'textarea, input'

  4. chosenClass: 被选择元素样式名,默认为'dragsort-drag'

  5. moveClass: 移动元素样式名,默认为'dragsort-move'

  6. zIndex: 层深

  7. dragCallback: 拖动中回调

  8. dragendCallback: 拖动结束回调

小结

两个难点

1、拖动过程中确定临时占位元素的位置,要考虑从水平关系还是垂直关系,如下图:

拖动

当拖动到一定距离时就要改变临时占位元素(虚线框)的位置

2、临时占位元素从原位置移动到新位置的动画效果,本插件没有实现,这个动画通过CSS3样式来操作更容易实现些,如果通过JS实现比较麻烦,还要考虑拖动的方向

性能:

没有HTML 5拖动API性能高是肯定的,拖动过程中要改变占位元素的位置,所以就要比较所有拖动节点与鼠标的坐标大小关系。遍历DOM本身就是消耗性能的大户,再加上这里还是mousemove事件遍历。想到一个比较鸡肋的办法用定时器来减少和延迟遍历的次数,但并没有在插件中实现。

觉得能用的着就下载吧jQuery列表拖动排序插件

电脑常识热点文章