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
Libérer: 2016-05-16 16:02:08
original
1472 Les gens l'ont consulté

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

Copier après la connexion

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal