jQuery ordenable obtener 2 elementos que se intercambian

Question

No puedo encontrar la forma de obtener el elemento de destino con jQuery UI ordenable.

$("#pages").sortable({ 
     opacity: 0.6, 
     update: function(event, ui) { 
      var first = ui.item; // First element to swap 
      var second = ???? // Second element to swap 
      swapOnServer(first, second); 
     } 
    }); 

Todas las opciones que he probado punto al elemento que se arrastran, pero no el que se intercambia con: ui.item[0], event.srcElement, event.toElement.

Además, this apunta al elemento LISTA (OL).

Decir segundo me refiero a continuación:

orden original es:

| 0 | | 2 | |

Arrastramos el elemento 1 y colocarlo en la posición 3. ¿Qué va a terminar con:

| 0 | | 2 | |

El primer elemento es 1 y el segundo es 3 (¡INCORRECTO! Vea a continuación).

ACTUALIZACIÓN: Me he dado cuenta de que me equivoqué. El nuevo pedido en este caso será.

| 0 | 2 | 3 | |

Como resultado, mi pregunta no tiene sentido. Gracias a todos por su ayuda. Voy a marcar el voto y marcar una respuesta.

Entonces la pregunta es ¿cómo obtener el segundo elemento aquí?

---

LA solución actual (ya que no hay término como intercambio de en sortable) está por debajo. Utiliza una matriz temporal con órdenes.

var prevPagesOrder = []; 
    $("#pages").sortable({ 
     start: function(event, ui) { 
      prevPagesOrder = $(this).sortable('toArray'); 
     }, 
     update: function(event, ui) { 
      var currentOrder = $(this).sortable('toArray'); 
      var first = ui.item[0].id; 
      var second = currentOrder[prevPagesOrder.indexOf(first)]; 
      swapOnServer(first, second); 
     } 
    }); 

Gracias,
Dmitriy.

Answer 1

No existe realmente un "segundo" elemento per se. Usted tiene un artículo, y simplemente lo está colocando en otra ubicación.Los elementos a su alrededor ajustan sus posiciones en consecuencia. Si desea obtener una matriz de todos los elementos, puede usar el método toArray.

Answer 2

Intente utilizar la función serialize que le da un hash de la lista de elementos en orden.

Si sólo necesita el artículo que el nuevo artículo van cayó antes de poder hacer esto:

$("#pages").sortable({ 
    opacity: 0.6, 
    update: function(event, ui) { 
     var first = ui.item; // First element to swap 
     var second = ui.item.prev(); 
     swapOnServer(first, second); 
    } 
}); 

segundo será nulo si su en el inicio de la lista.

Answer 3

echar un vistazo a la "Swapable" jQuery plugin:

http://plugins.jquery.com/project/Swapable

Es similar al "ordenable", pero sólo dos elementos del grupo seleccionado se ven afectados: elemento arrastrado y soltado una que se intercambian . Todos los demás elementos permanecen en sus posiciones actuales. Este plugin se basa en el plugin jQuery "ordenable" existente y hereda todas las opciones ordenables.

Answer 4

Puede utilizar http://plugins.jquery.com/project/Swapable

pero esto no es demasiado bueno complemento

Answer 5

Puede utilizar draggable y droppable en lugar de sortable para lograr intercambiables efecto. En la práctica, esto se verá así:

(function() { 
    var droppableParent; 

    $('ul .element').draggable({ 
     revert: 'invalid', 
     revertDuration: 200, 
     start: function() { 
      droppableParent = $(this).parent(); 

      $(this).addClass('being-dragged'); 
     }, 
     stop: function() { 
      $(this).removeClass('being-dragged'); 
     } 
    }); 

    $('ul li').droppable({ 
     hoverClass: 'drop-hover', 
     drop: function (event, ui) { 
      var draggable = $(ui.draggable[0]), 
       draggableOffset = draggable.offset(), 
       container = $(event.target), 
       containerOffset = container.offset(); 

      $('.element', event.target).appendTo(droppableParent).css({opacity: 0}).animate({opacity: 1}, 200); 

      draggable.appendTo(container).css({left: draggableOffset.left - containerOffset.left, top: draggableOffset.top - containerOffset.top}).animate({left: 0, top: 0}, 200); 
     } 
    }); 
}()); 

Demo, http://jsfiddle.net/FZ42C/1/.