一、需求的诞生
在我们的网页或者web应用中,想要对列表中的元素进行位置调整(或者说排序)是一个常见的需求。实现方式大概就以下两种,一种是带有类似“上移”、“下移”的按钮,点击可与相邻元素交换位置,另一种便是通过拖拽进行排序。搜索“jquery拖拽排序插件”,你会看到相关插件层出不穷。在HTML5拖拽API完善再加上移动设备横行的今天,后者似乎更受青睐,因为它有更简洁的操作,你看看,拖来拖去就可以调整顺序,多炫啊。
但是!为什么要说但是呢,因为这种拖拽操作也有它的弊端。首先是功能不明显,用户进来你的页面后不知道原来这些东西是可以拖动的,除非你再旁边加一行说明“拖动这些图片可以进行排序”;其次,拖动操作没有你想象的那么容易,使用PC的用户可能会在拖动的时候全选了一行文字,或是放不到正确的地方,而使用平板的用户呢,可能进行上下拖动的时候页面跟着一起滚动了,发挥想象一下。。。真的,多笨的用户都是有的。
所以。。。万能的产品经理大手一挥,这里,我们要通过点击排序!首先“上移”“下移”两个按钮摆那,你一看就知道可以移动,其次,如果连按钮都点不准,那以你的智商还玩什么电脑~
我们在填一些表单的时候,这样的点击排序功能确也见过很多了,那我这里为什么还要再重新造轮子呢!其实只为一个理由:他们那些没有动画效果。点击移动的时候“噌”一下就换过去了,如果交换的两个元素样子差不多,用户根本看不出来已经换过位置了。所以,我要让他有动画,要让用户清楚的知道,交换位置确实发生了。这样用户就会感觉自己很聪明,“我点的还是很准的嘛~”,一个小细节,打动用户了~
二、插件使用及效果展示
我总喜欢先把骡子拉出来溜溜,那么,来看看如何使用吧:
html代码如下:
<ul class="sortablelist"> <li class="sortableitem"> <span>1</span><span class="moveup">up</span><span class="movedown">down</span> </li> <li class="sortableitem"> <span>2</span><span class="moveup">up</span><span class="movedown">down</span> </li> <li class="sortableitem"> <span>3</span><span class="moveup">up</span><span class="movedown">down</span> </li> <li class="sortableitem"> <span>4</span><span class="moveup">up</span><span class="movedown">down</span> </li> </ul>
js代码如下:
$('.sortablelist').clickSort();
css代码如下:
.sortableitem span{display:inline-block;width:100px;} .sortablelist{position:relative;} .sortableitem{position:relative;width:400px; border:1px solid red; margin:30px;}
运行效果如下:
- 1updown
- 2updown
- 3updown
- 4updown
三、技术细节
其实我真正想说的是这一部分内容,就是交换动画的制作。其核心就是使用jquery的animated方法,但是具体怎么个用法还是经过一番考虑的。
大家都知道,animate的动画效果其实是通过动态修改css的属性值来产生渐变效果的。然而我们在交换两个节点的位置时,其实并未操作元素的css属性。所有的变化仅仅是由
<li>1</li> <li>2</li>
变为了
<li>2</li> <li>1</li>
根本没有操作css属性嘛!这让我怎么渐变?而且交换两个元素的位置从来都是瞬时完成的,压根没有“缓缓交换”这么一说。
所以就需要变通了,能不能从视觉上”欺骗“一下用户呢?先给他一个两个元素移动交换位置的假象,然后再悄悄把元素的位置”瞬时交换“。恩,不错的想法!
首先,我们选择要渐变的属性,当然是非top莫属了,通过animate操作top属性来完成上下移动。top属性只有在元素的相对定位或是绝对定位时才有效,所以我们在css中为其父容器(sortablelist)及需要移动的子元素(sortableitem)全部指定position:relative。当我对我的想法跃跃欲试的时候,发现了一个问题:当我把第一个li的top值设为40px,第二个li的top值设为0的时候,两个li的位置并没有发生交换,而是这样的
2下来了,但是1却没有上去。为什么呢?道理很简单:相对定位的元素,偏移出来的位置不能被其他元素占据。那我岂不要用absolute了?但是如果使用absolute的话效果确实这样的:
1和2的位置被其他不速之客占据了!看来想要修改元素的位置并不是那么顺利啊,被交换的元素是不能走的,它一走就被别人占了地盘了。那怎么办呢?真身不能走,让替身来完成交换动画如何?我真是个天才~关键时刻,jquery的clone()方法派上用场了,让它克隆一个替身出来,给替身absolute,让替身去动画去,动画开始的时候自己先隐藏,等动画完了悄悄”瞬间交换“位置,然后再出现。这简直是一台魔术秀。台下的观众都以为:哇,交换位置了耶,还带动画耶!
所以呢,css中指定的relative的作用你也明白了吧。使用的时候千万别去掉哦。html代码中的class名字也要保持不变,你可以在li元素中再添加其他元素用于定制自己的界面。
四、插件配置参数
我想了想也没想到有什么参数可以配置,暂时只加了一个speed,默认是200,控制动画的速度,另外有一个回调函数callback,在每次交换完毕的时候执行。如下
$('.sortablelist').clickSort({ speed:1000,
callback:function(){
alert('ok');
}
});
最后奉上下载地址:http://files.cnblogs.com/lvdabao/jquery.clickSort.js
本文转自吕大豹博客园博客,原文链接:http://www.cnblogs.com/lvdabao/p/3203203.html,如需转载请自行联系原作者