jquery实现标签上移、下移、置顶

2024-09-29 14:17:29

eg:如在后台的标签列表中，实现上移、下移、置顶功能

主要实现思路是节点操作，比如说：上移，直接把点击项移动到前一个节点，以此类推，当然实际代码实现还要加些判断，如当前点击操作项是否已经是置底或置底了，如果是则给点相应提示，好让操作者知道发生了什么事情。

思路：

1、先用到的克隆方法.clone(true):

即把当前要移动的项先保存好，备于后用。

2、找到当前标签所对应的相关元素及其相关方法：

如：.prev()当前元素上面的标签

.next()当前元素下面的标签

.after()xxx之后添加方法

.before()xxx之前添加方法

.prepend添加方法

3、实现

具体代码如：

var productsLabel = {
  //设置置顶
  setHot: function(t){
    var bar = 'showAndHide_box';
    var obj = $(t).parents('.'+bar).clone(true);
    $(t).parents('.'+bar).remove();
    $(".showAndHide_list_box").prepend(obj);
  },

  //设置上移
  setUp: function(t){
    var bar = 'showAndHide_box';
    if($(t).parents('.'+ bar).prev('.'+bar).html() != undefined){
      var obj = $(t).parents('.'+bar).clone(true);
      $(t).parents('.'+bar).prev().before(obj);
      $(t).parents('.'+bar).remove();
    }else{
      alert('亲，现在已是最上的哦，不能再上移了...');
    }
  },

  //设置下移
  setDown: function(t){
    var bar = 'showAndHide_box';
    if($(t).parents('.'+bar).next('.'+bar).html() != undefined){
      var obj = $(t).parents('.'+bar).clone(true);
      $(t).parents('.'+bar).next().after(obj);
      $(t).parents('.'+bar).remove();
    }else{
      alert('亲，现在已是最下的哦，不能再下移了...');
    }
  }
}

以上就是本文给大家分享的全部内容了，希望大家能够喜欢。

C# SetWindowPos窗口置顶使用说明

复制代码代码如下: [DllImport("user32.dll", CharSet = CharSet.Auto)] private static extern int SetWindowPos(IntPtr hWnd, int hWndInsertAfter, int x, int y, int Width, int Height, int flags); /// <summary> /// 得到当前活动的窗口 /// </summary> /// <
Android自定义组合控件之自定义下拉刷新和左滑删除实例代码

绪论最近项目里面用到了下拉刷新和左滑删除,网上找了找并没有可以用的,有比较好的左滑删除,但是并没有和下拉刷新上拉加载结合到一起,要不就是一些比较水的结合,并不能在项目里面使用,小编一着急自己组合了一个,做完了和QQ的对比了一下,并没有太大区别,今天分享给大家,其实并不难,但是不知道为什么网上没有比较好的Demo,当你的项目真的很急的时候,又没有比较好的Demo,那么"那条友谊的小船儿真是说翻就翻啊",好了,下面先来具体看一下实现后的效果吧: 代码已经上传到Github上了,小伙伴们记
Android使用SwipeListView实现类似QQ的滑动删除效果

QQ的滑动删除效果很不错,要实现这种效果,可以使用SwipeListView. 1. 下载com.fortysevendeg.swipelistview这个项目(以前GitHub上有,现在GitHub上没有了,百度了很多次才下载到的),导入Eclipse,右键单击,选择Properties->Android,选中Library下面的IsLibrary. 2. 新建一个项目MySwipeListView,加入SwipeListView这个库. 3. 在主窗体里面放入一个SwipeListView控
Android ListView实现仿iPhone实现左滑删除按钮的简单实例

需要自定义ListView.这里就交FloatDelListView吧. 复写onTouchEvent方法.如下: @Override public boolean onTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_DOWN:<BR> // 获取按下的条目视图(child view) int childCount = getChildCount(); int[] listViewCo
jquery实现的鼠标下拉滚动置顶效果

$(function(){ //置顶按钮显示/隐藏实现 $(window).scroll(function(){ var w_height = $(window).height();//浏览器高度 var scroll_top = $(document).scrollTop();//滚动条到顶部的垂直高度 if(scroll_top > w_height){ $("#goto-top").fadeIn(500); }else{ $("#goto-top").f
Android仿QQ左滑删除置顶ListView操作

最近闲来无事,于是研究了一下qq的左滑删除效果,尝试着实现了一下,先上效果图: 大致思路原理: - 通过设置margin实现菜单的显示与隐藏 - 监听onTouchEvent,处理滑动事件上代码 import android.content.Context; import android.util.AttributeSet; import android.util.DisplayMetrics; import android.view.MotionEvent; import android.v
jQuery实现表格行上下移动和置顶效果

我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现表格数据排序. HTML 页面上是一个简单的数据表格,我们在数据行中分别放置"上移","下移"和"置顶"三个链接,并且分别定义三个class属性,我们来通过jQuery实现这些操作. <table class="table"> <tr> <
导航跟随滚动条置顶移动示例代码

复制代码代码如下: #topmenu{position:absolute;top:100px;background:#4b4a4a;width:100%;margin:0 auto;clear:both;overflow:hidden;z-index:998;left:0} <script type="text/javascript"> jQuery(document).ready(function() { var topmenu = jQuery("#topm
Android下拉刷新上拉加载更多左滑动删除

一.前言老规矩,别的不说,这demo是找了很相关知识集合而成的,可以说对我这种小白来说是绞尽脑汁!程序员讲的是无图无真相! 现在大家一睹为快! 二.比较关键的还是scroller这个类的 package com.icq.slideview.view; import android.content.Context; import android.util.AttributeSet; import android.util.Log; import android.util.TypedValue;
jQuery实现表格行上移下移和置顶的方法

本文实例讲述了jQuery实现表格行上移下移和置顶的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <ti

jquery实现标签上移、下移、置顶

相关推荐

随机推荐