Interfaccia utente JQuery: Annulla ordinabile in caso di rilascio trascinabile

Question

Sto utilizzando JQuery 1.5.1 e JQuery UI 1.8.11.

Ho aggiunto ordinabile per un numero di elementi: l'attività qui è consentire il trascinamento per ordinare, tutto funziona correttamente.

Ma voglio anche incorporare droppable, in modo che l'oggetto può essere lasciato cadere su una zona "me copiare" - il compito non sarà quello di duplicare la voce (lavorerò quel po 'più tardi)

Problema l'obiettivo trascinabile si trova nella parte inferiore della lista ordinabile (non voglio spostarlo) e una volta che si verifica la caduta, l'oggetto ordinabile si sposta in fondo alla lista.

Quello che voglio fare è cancellare questo tipo quando scatta l'evento di rilascio.

You can see my problem in action here (basta trascinare "Articolo 1" sul "Drop per copiare l'oggetto" zona e vedrete il tipo non viene annullata)

Come potete vedere ho provato quanto segue nella goccia droppable" "evento (suggerito da jQuery UI Docs), ma non sembra funzionare ...

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

sono aperto anche a tutte le altre raccomandazioni su come raggiungere questo obiettivo 'drop per copiare' effetto sto cercando.

Grazie

Answer 1

OK, quindi mi hanno elaborato una soluzione che fa il lavoro.

il codice di annullamento funziona se lo si ha nell'evento "stop" della funzione ordinabile. Tuttavia, si applicherà solo una volta completato il "ripristino". Il problema è che stavo cercando di copiare/ripristinare l'elemento dall'evento droppable "drop" e questo era troppo presto.

La soluzione è attendere l'evento "stop" per il completamento, e per raggiungere questo obiettivo ho dovuto creare un flag "in attesa di copia", da verificare nell'evento "stop".

Here is an example

E ancora non si sente a destra (UX-saggio), ma funziona correttamente, e si potrebbe impostare sempre tornare alla falsa sulla funzione ordinabile per ottenere una sensazione un po 'meglio.

Il codice dell'esempio è la seguente ...

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

In ogni caso, si spera che questo aiuterà gli altri che vogliono lo stesso tipo di effetto ... non rubare il mio disegno però;)