jQuery do sortowania otrzymuje 2 wymieniane elementy

Question

Nie mogę znaleźć sposobu na uzyskanie elementu docelowego z sortowalnym jQuery UI.

$("#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); 
     } 
    }); 

Wszystkie opcje próbowałem punkt do elementu przeciągany, ale nie ten jest zamienione z: ui.item[0], event.srcElement, event.toElement.

Dodatkowo, this wskazuje na element LISTA (OL).

Mówiąc sekund Znaczy następuje:

oryginalnej kolejności jest:

| 0 | | 2 | |

Mamy przeciągania elementu 1 i upuść go w pozycji 3. Które skończy się z:

| 0 | | 2 | |

Pierwszy element to 1, a drugi to 3 (NIEPRAWIDŁOWO! Patrz poniżej).

AKTUALIZACJA: zdałem sobie sprawę, że źle to zrobiłem. Nowy porządek w tym przypadku będzie.

| 0 | 2 | 3 | |

W rezultacie moje pytanie nie ma większego sensu. Dziękuję wszystkim za pomoc. Zaznaczę głos i zaznaczę odpowiedź.

Pytanie więc, jak uzyskać tutaj drugi element?

---

OBECNY Rozwiązanie (co nie jest określenie, jak wymiany w sortowalny) przedstawiono poniżej. Używa tymczasowej tablicy z zamówieniami.

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); 
     } 
    }); 

Dzięki
Dmitriy.

Answer 1

Nie ma naprawdę "drugiego" przedmiotu jako takiego. Masz przedmiot i po prostu umieszczasz go w innym miejscu.Elementy wokół niego odpowiednio dostosowują swoje pozycje. Jeśli chcesz uzyskać tablicę wszystkich elementów, możesz użyć metody toArray.

Answer 2

Spróbuj użyć funkcji serialize, która daje mieszankę z listy pozycji w kolejności.

Jeśli wystarczy pozycję, że nowa pozycja go upuścił, zanim będzie można to zrobić:

$("#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); 
    } 
}); 

drugi będzie mieć wartość NULL, jeśli jej na początku listy.

Answer 3

spojrzeć na „Swapable” jQuery plugin:

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

on podobny do „Sortable”, ale tylko dwa elementy wybranej grupy są dotknięte: przeciągnięty element i spadł jeden które są zamienione . Wszystkie pozostałe elementy pozostają na swoich aktualnych pozycjach. Ta wtyczka jest zbudowana na podstawie istniejącej "sortowalnej" wtyczki jQuery i dziedziczy wszystkie opcje do sortowania.

Answer 4

Można użyć http://plugins.jquery.com/project/Swapable

ale nie jest to zbyt dobry plugin

Answer 5

Można użyć draggable i droppable zamiast sortable osiągnąć swap efekt. W praktyce będzie to wyglądać tak:

(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/.