Interfaz de usuario de JQuery: Cancelar ordenable en Droppable Drop

Question

Estoy usando JQuery 1.5.1 y JQuery UI 1.8.11.

He añadido ordenable para una serie de elementos: la tarea aquí es permitir que el arrastre ordene, todo funciona bien.

Pero también quiero incorporar lanzables, por lo que el artículo se puede caer sobre una zona "Me copiar" - la tarea no será duplicar el elemento (Voy a trabajar que poco después)

Problema El objetivo que se puede soltar se encuentra en la parte inferior de la lista ordenable (no quiero mover esto) y una vez que se produce la caída, el elemento clasificable se mueve al final de la lista.

Lo que quiero hacer es cancelar este tipo cuando se desencadena el evento de soltar.

You can see my problem in action here (sólo arrastre "Artículo 1" a la "soltar para copiar artículo" área y verá el tipo no quede cancelada)

Como se puede ver que he intentado lo siguiente en la caída lanzables" "evento (sugerido de jQuery UI Docs) pero no parece funcionar ...

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

también estoy abierto a cualquier otra recomendación sobre la manera de lograr esto 'soltar para copiar' efecto yo estoy buscando.

Gracias

Answer 1

OK, por lo que han trabajado en una solución que hace el trabajo.

el código de cancelación funciona si lo tiene en el evento "detener" de la función ordenable. Sin embargo, solo se aplicará una vez que se haya completado el "reverso". El problema es que estaba tratando de copiar/revertir el elemento del evento drop-drop "drop" y esto era demasiado temprano.

La solución es esperar a que se complete el evento de "detención", y para lograrlo tuve que crear una bandera de "espera de copia", que se verificará en el evento "detener".

Here is an example

Todavía no se siente bien (UX-wise) pero funciona correctamente, y siempre se puede fijar a revertir falsa en la función se puede ordenar para conseguir un poco mejor sensación.

El código del ejemplo es la siguiente ...

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

De todos modos, espero que esto ayude a otros que quieren el mismo tipo de efecto ... no robar mi diseño sin embargo;)