jquery插件——点击交换元素位置(带动画效果)

简介:

一、需求的诞生

  在我们的网页或者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,如需转载请自行联系原作者

相关文章
|
2月前
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
44 10
|
2月前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
63 2
|
2月前
|
JavaScript 前端开发 UED
jQuery 动画
【10月更文挑战第8天】
111 55
|
9天前
|
JavaScript
jQuery实现弹窗消息提示特效插件
这是一个简单的jQuery弹窗消息提示插件,用于网站用户操作提示。包含默认、成功、失败、警告、提示弹窗等不同形式弹出的消息提示效果,轻量简单,欢迎下载!
22 4
|
2月前
|
JavaScript 前端开发
jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒)
54 4
jQuery Growl 插件(消息提醒)
|
2月前
|
存储 JSON JavaScript
jQuery Cookie 插件
jQuery Cookie 插件
47 4
jQuery Cookie 插件
|
1月前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
30 0
|
3月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
21 2
|
3月前
|
JavaScript
jQuery 停止动画
jQuery 停止动画
23 4
|
3月前
|
缓存 JavaScript 前端开发
jQuery 效果- 动画
jQuery 效果- 动画
30 4