js上移下移功能

今天分享一下项目里面用到的一个小功能，实现上移下移的功能。

<ul class="ctL_handle J_ctL_handle">
    <li class="ctL_li j_ctl_li">
          <span>上移</span>
          <span>下移</span>
     </li>
     <li class="ctL_li j_ctl_li">
          <span>上移</span>
          <span>下移</span>
     </li>
      <li class="ctL_li j_ctl_li">
          <span>上移</span>
          <span>下移</span>
     </li>
</ul>

这里样式的话就不写了，可以根据自己的需求来定义，主要的还是逻辑部分。

var moveUporDown= {
	//设置上移
	setUp: function(t){
		var bar = 'ctL_li'; //获取到需要操作的每一个li（我们操作的是让li上下移动）
		if($(t).parents('.'+ bar).prev('.'+bar).html() != undefined){
			//克隆当前节点
			var obj = $(t).parents('.'+bar).clone(true);
			var objs = $(t).parents('.'+bar).prev().clone(true);
			//先让当前节点父元素做运动实现上移效果
			$(t).parents('.'+ bar).stop().animate({
				"bottom":$(t).parents('.'+ bar).prev().height()+70
			},500);
			//当前节点的父节点的上一个兄弟节点运动实现下移效果
			$(t).parents('.'+ bar).prev().stop().animate({
				"top":$(t).parents('.'+ bar).height()+70
			},500,function(){
					//运动完成后先让此节点父元素之前插入克隆然后再移除父节点
					$(t).parents('.'+bar).prev().before(obj);
					$(t).parents('.'+bar).prev().remove();
					//此节点前插入克隆再移除（克隆移除必须写在一块）
					$(t).parents('.'+bar).before(objs);
					$(t).parents('.'+bar).remove();
					totalTi();
			});
		}else{
			alert('已经到顶，不能再上移了...');
		}
	},
	//设置下移
	setDown: function(t){
		var bar = 'ctL_li';
		if($(t).parents('.'+bar).next('.'+bar).html() != undefined){
			//克隆一个当前节点
			var obj = $(t).parents('.'+bar).clone(true);
			var objs = $(t).parents('.'+bar).next().clone(true);
			//先让当前节点父元素做运动实现下移效果
			$(t).parents('.'+ bar).stop().animate({
				"top":$(t).parents('.'+ bar).next().height()+70
			},500);
			//当前节点的父节点的上一个兄弟节点运动实现上移效果
			$(t).parents('.'+ bar).next().stop().animate({
				"bottom":$(t).parents('.'+ bar).height()+70
			},500,function(){
					//运动完成后先让此节点父元素之后插入克隆然后再移除父节点
					$(t).parents('.'+bar).next().after(obj);
					$(t).parents('.'+bar).next().remove();
					//此节点后插入克隆再移除（克隆移除必须写在一块）
					$(t).parents('.'+bar).after(objs);
					$(t).parents('.'+bar).remove();
					totalTi();
			});
		}else{
			alert('已经到底，不能再下移了...');
		}
	}
}

这样我们分别给span绑定一个事件，比如上移的span，加个类名.j_setUp，然后

$(".j_setUp").on("click",function(){
   productsLabel.setUp(this);  //直接调用我们写好的方法，传入this就可以了
});

下移的操作也是如此。