jquery はラベルの上下、top_jquery の移動を実装します。

例: 例えば、背景のタグリストでは、上に移動、下に移動、上に固定する機能が実現されています

主な実装アイデアはノードの操作です。たとえば、上に移動する、クリックされた項目を前のノードに直接移動するなどです。もちろん、実際のコード実装では、現在クリックされているかどうかなど、いくつかの判断を追加する必要があります。操作項目がすでに最下位であるか、最下位に設定されている場合は、対応するプロンプトが表示され、何が起こったかをオペレーターに知らせます。

もの:

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

上記はこの記事で皆さんに共有した内容のすべてです。気に入っていただければ幸いです。