jQuery Girl
  1. jQuery Girl
  3. JQuery Sortable élément défini à un index par programme
Intereting Posts
PHP change dynamicment le nom de fichier jquery popup close function ne fonctionne pas jQuery Tokeninput: en lecture seule ne fonctionne pas bootstrap vérifier / décocher plusieurs éléments avec js dans un menu vertical, si je survole chaque menu, trois colonnes de sous-menus doivent s’afficher à l’aide de la conception du matériel bootstrap Empêcher la fonction Javascript de se déclencher plusieurs fois comparer les tableaux javascript Option de mise à jour en mode dinamique lorsque l’utilisateur change de mois dans l’amorçage de datepicker Changer la propriété CSS d’une autre div située dans une autre page Filtre personnalisé JQuery Mobile – Cases à cocher ignorer le sorting sur une colonne particulière Comment appeler une fonction jQuery externe en mode angular Afficher le panneau de chargement en cliquant sur le bouton asp Gestion de json Form avec jQuery sur Google App Engine Evénements Contentés – Jquery

JQuery Sortable élément défini à un index par programme

J’ai un JQuery sortable (1.7.1 peut changer si nécessaire) liste comme suit: 

     
  • 1
    •  
  • 2
    •  
  • 3
    •  
  • 4
    •  
  • 5
    •

Le deuxième élément est verrouillé. Par conséquent, si l’élément 5 tente d’être déplacé dans l’emplacement 2, il est inséré dans l’emplacement 3 et s’il est déplacé dans l’emplacement 1, l’élément existant dans l’emplacement 1 passe à 3 et l’élément 5 à 1.

La logique de mise en œuvre est simple, mais ce que j’ai besoin de savoir, c’est s’il existe un moyen programmé de déplacer des éléments qui incluraient les animations.

Est-ce que celui-ci a déjà été déplacé par programme avec jQuery pouvant être sortingé tout en déclenchant des événements, mais vous ne savez pas si l’événement ‘sortupdate’ simule un glisser-déposer ou s’il fonctionne même?

Cela a fonctionné parfaitement.

Suivez les étapes et incluez ceci : 

  $el.fadeOut(1000, function(){ $el.insertAfter($el.next()); $el.fadeIn(1000); });

Comme ceci (définir l’identifiant de la balise li bien sûr) : 

 jQuery(".templateMoveUp").on("click", function(){ $el = jQuery("#" + $(this).attr("id") + "_logTemplate"); $el.fadeOut(1000, function(){ $el.insertBefore($el.prev()); $el.fadeIn(1000); }); }); jQuery(".templateMoveDown").on("click", function(){ $el = jQuery("#" + $(this).attr("id") + "_logTemplate"); $el.fadeOut(1000, function(){ $el.insertAfter($el.next()); $el.fadeIn(1000); }); });

Après un rapide coup d’œil sur le code source Sortable de jQuery, il ne semble pas qu’une telle fonctionnalité soit intégrée à ce stade (ce serait un bon ajout à cela, je pense). Quoi qu’il en soit, une solution rapide que j’ai utilisée pour le moment, au cas où quelqu’un aurait le même problème: 

  $el.fadeOut(1000, function(){ $el.insertAfter($el.next()); $el.fadeIn(1000); });

Cela indique assez clairement qu’un article se déplace d’un endroit à un autre.

Voici le code complet du problème ci-dessus si quelqu’un se pose exactement le même problème.

1- Enregistrez ces 2 événements dans l’init Sortable comme ceci: 

 start: function(event,ui){$(ui.item).data('initialPos', $(ui.item).offset().top)}, handle: ".drag", stop: lockedRearrange,

2- 

 var lockedRearrange = function(event, ui){ //block ordering while the current item is rearranged $('.drag', event.target).removeClass('drag').addClass('blockdrag'); var $el = $(ui.item); var directionUp = (ui.absolutePosition.top < $el.data('initialPos')) ? true : false ; _rearrange($el, directionUp, $el.data('initialPos')); }; var _rearrange = function($el, directionUp, initialPos){ if ($el.offset().top == initialPos) { $('.blockdrag', $el.parent()).removeClass('blockdrag').addClass('drag'); return; } var $knockEl = (directionUp) ? $el.next() : $el.prev(); if ($knockEl.hasClass('locked')) { $el.fadeOut(1000, function(){ (directionUp) ? $el.insertAfter($knockEl) : $el.insertBefore($knockEl); $el.fadeIn(1000, function(){ _rearrange($el, directionUp, initialPos); }); }); }else _rearrange($knockEl, directionUp, initialPos); };