jQuery: cómo evitar que un ayudante se elimine si no se eliminó correctamente

Question

Tengo un draggable con una costumbre helper . A veces el ayudante es un clon y otras veces es el elemento original.

El problema es que cuando el elemento auxiliar es el elemento original y no se suelta en un dropable válido, se elimina. Mi solución se ve así hasta ahora:

en mi on_dropped callback configuré ui.helper.dropped_on_droppable en true ;

En la devolución de llamada stop del que se puede arrastrar, compruebo esa variable y luego ... ¿qué hago?

$('.my_draggable').draggable({
    stop   : function(e, ui) {
        if (!ui.helper.dropped_on_droppable) {
            /* what do I do here? */
        }
    },

¿Es este incluso el enfoque correcto?

Answer 1

Ok, encontré una solución! Es feo y rompe las 'reglas de encapsulación', pero al menos cumple con su función.

¡Recuerde esto es solo para casos especiales ! jQuery puede manejar su propia eliminación de ayudante muy bien. En mi caso, tenía un ayudante que a veces era el elemento original y, a veces, un clon, por lo que no siempre era apropiado eliminar el ayudante después de revertir.

element.draggable({
    stop   : function(e, ui) {
        /* "dropped_on_droppable" is custom and set in my custom drop method
           ".moved_draggable" is custom and set in my custom drag method, 
                     to differentiate between the two types of draggables
        */               
        if (!ui.helper.dropped_on_droppable & ui.helper.hasClass('moved_draggable')) {
            /* this is the big hack that breaks encapsulation */
            $.ui.ddmanager.current.cancelHelperRemoval = true;
        }
    },

Advertencia: esto rompe la encapsulación y puede que no sea compatible hacia adelante

Answer 2

Puede que me falte algo aquí, pero no es simplemente un caso de agregar

revert: "invalid"

a las opciones del elemento arrastrable si el elemento arrastrable es de un elemento original, no de un clon?

Answer 3

Utilizo un ayudante personalizado que agrega draggables de selección múltiple en un solo div. Esto no parece funcionar con la funcionalidad de revertir, así que se me ocurrió este esquema. Los elementos se anexan manualmente al padre original, del cual hago un seguimiento a través de .data ().

.draggable({
    helper: function() {
        var div = $(document.createElement('div'))
            .data('lastParent', $(this).parent());
        return div;
    },
    start: function() {
        //... add multiple selection items to the helper..          
    },
    stop: function(event,ui) {
        $( $(ui.helper).data('lastParent') ).append( $(ui.helper).children() );
    }
}

Este enfoque se pierde con la animación bonita, pero puede ser útil para usted u otra persona con este problema.