jquery implements label movement up, down, and top_jquery

eg: For example, in the tag list in the background, the functions of moving up, moving down, and sticking to the top are realized

The main implementation idea is node operation, for example: move up, directly move the clicked item to the previous node, and so on. Of course, the actual code implementation needs to add some judgments, such as whether the current clicked operation item is already bottom Or it is set to the bottom. If so, a corresponding prompt will be given to let the operator know what happened.

Things:

1. The cloning method used first.clone(true):

That is to say, save the item currently to be moved for later use.

2. Find the relevant elements corresponding to the current tag and their related methods:

For example: .prev() tag on the current element

.next() tag below the current element

Add method after .after()xxx

.before() Add method before xxx

.prepend adding method

3. Implementation

The specific code is as follows:

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('亲，现在已是最下的哦，不能再下移了...'); 
    } 
  } 
}

The above is all the content shared with you in this article, I hope you will like it.