开发者社区> 技术mix呢> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JQuery的事件处理和动画效果
JQuery的事件处理和动画效果
0 0
对于jQuery选择器和动画效果停止动画的实战心得【前端jQuery框架】
对于jQuery选择器和动画效果停止动画的实战心得【前端jQuery框架】
0 0
在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
0 0
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
0 0
SAP UI5页面动画效果的实现,实际借用了jQuery的库文件
SAP UI5页面动画效果的实现,实际借用了jQuery的库文件
0 0
从零玩转jQuery-动画效果
显示、隐藏动画 show([s,[e],[fn]]) 显示动画 内部实现原理根据当前操作的元素是块级还是行内决定, 块级内部调用display:block;,行内内部调用display:inline; // 编写jQuery相关代码 $("button").
987 0
+关注
文章
问答
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载