Maison >interface Web >js tutoriel >jquery implémente le mouvement des étiquettes vers le haut, vers le bas et top_jquery

jquery implémente le mouvement des étiquettes vers le haut, vers le bas et top_jquery

WBOY
WBOYoriginal
2016-05-16 16:02:081478parcourir

par exemple : Par exemple, dans la liste des balises en arrière-plan, les fonctions de monter, descendre et coller vers le haut sont réalisées

L'idée principale de l'implémentation est l'opération du nœud, par exemple : monter, déplacer directement l'élément cliqué vers le nœud précédent, et ainsi de suite. Bien sûr, l'implémentation réelle du code doit ajouter certains jugements, par exemple si le clic actuel est effectué. L'élément d'opération est déjà en bas Ou il est réglé en bas. Si tel est le cas, une invite correspondante sera émise pour informer l'opérateur de ce qui s'est passé.

Choses :

1. La méthode de clonage utilisée en premier.clone(true) :

C'est-à-dire enregistrer l'élément actuellement à déplacer pour une utilisation ultérieure.

2. Recherchez les éléments pertinents correspondant à la balise actuelle et leurs méthodes associées :

Par exemple : balise .prev() sur l'élément courant

Balise .next() sous l'élément actuel

Ajouter une méthode après .after()xxx

.before() Ajouter une méthode avant xxx

Méthode d'ajout .prepend

3.Mise en œuvre

Le code spécifique est le suivant :

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

Ce qui précède est tout le contenu partagé avec vous dans cet article, j'espère qu'il vous plaira.

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn