JQuery UI: Anuluj do sortowania po Droppable Drop

Question

Używam JQuery 1.5.1 i JQuery UI 1.8.11.

Dodałem możliwość sortowania dla wielu przedmiotów - zadaniem tutaj jest umożliwienie przeciągania do sortowania, wszystko działa dobrze.

Ale chcę włączyć droppable tak, że element może być upuszczony na „kopią mnie” obszar - zadanie nie będzie powielać element (będę pracować to trochę później)

problem to zrzucany cel znajduje się na dole listy do sortowania (nie chcę tego przenosić), a gdy pojawi się zrzut, sortowalny element przesuwa się na dół listy.

To, co chcę zrobić, to anulować sortowanie po uruchomieniu zdarzenia upuszczenia.

You can see my problem in action here (wystarczy przeciągnąć „pkt 1” na „drop do kopiowania pozycji” obszar i widać ten rodzaj nie zostanie anulowane)

Jak widać Próbowałem następujących w droppable „drop "zdarzenie (sugerowana z jQuery UI Docs), ale nie wydaje się do pracy ...

$(this).sortable('cancel'); 

Jestem również otwarty na wszelkie inne zalecenia dotyczące sposobu osiągnięcia tego«drop skopiować»efekt szukam.

Dzięki

Answer 1

Ok, więc wypracowaliśmy rozwiązanie, które spełnia swoje zadanie.

kod anulowania działa, jeśli masz go w zdarzeniu "stop" funkcji do sortowania. Będzie jednak obowiązywać dopiero po zakończeniu "powrotu". Problem polega na tym, że próbowałem skopiować/przywrócić element ze zrzucanego zdarzenia "drop" i było to zbyt wcześnie.

Rozwiązaniem jest poczekanie, aż zdarzenie "stop" zostanie zakończone, i aby to osiągnąć, musiałem utworzyć flagę "oczekującej kopii", która zostanie sprawdzona w zdarzeniu "stop".

Here is an example

To nadal nie czuje się w prawo (UX-wise), ale działa poprawne, a zawsze można ustawić przywrócić false funkcję sortable uzyskać nieco lepszy dotyk.

Kod z przykładu jest następująca ...

var itemCount = 3; 
var awaitingCopy = false; 

$(init); 

function init() { 
    $("#Items").sortable({ 
     revert: true, 
     placeholder: "ItemPlaceHolder", 
     opacity: 0.6, 
     start: StartDrag, 
     stop: StopDrag 
    }); 

    $("#CopyItem").droppable({ 
     hoverClass: "CopyItemActive", 
     drop: function(event, ui) { 
      awaitingCopy = true; 
     } 
    }); 

    $("#NewItem").click(function(e) { 
     e.preventDefault(); 
     itemCount++; 
     var element = $("<div class='Item'>Item " + itemCount + "</div>"); 
     $("#Items").append(element); 
     element.hide().slideDown(500); 
    }); 
} 

function CopyItem(element) { 
    awaitingCopy = false; 
    var clone = element.clone(); 
    $("#Items").append(clone); 
    clone.hide().slideDown(500); 
} 

function StartDrag() { 
    $("#NewItem").hide(); 
    $("#CopyItem").show(); 
} 

function StopDrag(event, ui) { 
    if (awaitingCopy) { 
     $(this).sortable('cancel'); 
     CopyItem($(ui.item)); 
    } 
    $("#NewItem").show(); 
    $("#CopyItem").hide(); 
} 

W każdym razie, mam nadzieję, że to pomoże innym, którzy chcą tego samego rodzaju efekt ... nie kradną mój projekt chociaż;) Co