changer le comportement de la position de l’interrupteur

Comment changer le comportement du commutateur dans sortable? Je veux dire par défaut, il y a 1 - 2 - 3 - 4 http://jsfiddle.net/keGuN/ lorsque je change de position entre 4 et 1 – ils se transforment en 4 - 1 - 2 - 3 . Je veux seulement changer les positions de 4 et 1 ( 4 - 2 - 3 - 1 ). Comment faire?

Je pense que je comprends ce que vous essayez de faire. Sortable de jQuery n’est pas vraiment conçu pour faire ce que vous demandez. Cependant, en jouant avec les événements exposés par Sortable, vous pouvez permuter les positions de l’élément déplacé (A) avec l’élément qui se trouvait précédemment à l’emplacement (B) où A a été supprimé. Je pense que cela produit l’effet souhaité:

jsFiddle demo

jQuery:

 $(function() { var oldIndex; $("#sortable").sortable({ start: function(event, ui) { oldIndex = ui.item.index(); }, stop: function(event, ui) { var newIndex = ui.item.index(); var movingForward = newIndex > oldIndex; var nextIndex = newIndex + (movingForward ? -1 : 1); var items = $('#sortable > div'); // Find the element to move var itemToMove = items.get(nextIndex); if (itemToMove) { // Find the element at the index where we want to move the itemToMove var newLocation = $(items.get(oldIndex)); // Decide if it goes before or after if (movingForward) { $(itemToMove).insertBefore(newLocation); } else { $(itemToMove).insertAfter(newLocation); } } } }); $("#sortable").disableSelection(); }); 

Le seul problème notable est que les positions ne sont pas mises à jour lors du glissement, mais uniquement après que l’élément est déposé dans son nouvel emplacement.

Vous pouvez réaliser l’échange avec draggable / droppable

 $(function() { $(".swapable"). draggable({ revert: true }). droppable({ drop:function(event,ui){ swapNodes($(this).get(0),$(ui.draggable).get(0)); }}); }); 

https://stackoverflow.com/a/698440/2033671

 function swapNodes(a, b) { var aparent= a.parentNode; var asibling= a.nextSibling===b? a : a.nextSibling; b.parentNode.insertBefore(a, b); aparent.insertBefore(b, asibling); } 

http://jsfiddle.net/keGuN/1/