jquery implementiert die Beschriftungsbewegung nach oben, unten und top_jquery

Beispiel: In der Tag-Liste im Hintergrund werden beispielsweise die Funktionen „Nach oben verschieben“, „Nach unten verschieben“ und „An der Spitze bleiben“ realisiert

Die Hauptidee der Implementierung ist die Knotenoperation, zum Beispiel: Verschieben Sie das angeklickte Element direkt zum vorherigen Knoten usw. Natürlich müssen bei der eigentlichen Codeimplementierung einige Beurteilungen hinzugefügt werden, z. B. ob das aktuelle Element angeklickt wurde Das Betriebselement befindet sich bereits im unteren Bereich. Wenn dies der Fall ist, wird eine entsprechende Meldung ausgegeben, um den Bediener darüber zu informieren, was passiert ist.

Dinge:

1. Die verwendete Klonmethode first.clone(true):

Das heißt, speichern Sie das aktuell zu verschiebende Element zur späteren Verwendung.

2. Suchen Sie die relevanten Elemente, die dem aktuellen Tag entsprechen, und die zugehörigen Methoden:

Zum Beispiel: .prev()-Tag für das aktuelle Element

.next()-Tag unter dem aktuellen Element

Methode nach .after()xxx hinzufügen

.before() Methode vor xxx

hinzufügen

.prepend Adding-Methode

3. Umsetzung

Der spezifische Code lautet wie folgt:

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

Das Obige ist der gesamte Inhalt, der in diesem Artikel mit Ihnen geteilt wird. Ich hoffe, dass er Ihnen gefällt.