Hacer jQuery droppable aceptar elementos de un ordenable que está utilizando connectWith

Question

Tengo una lista ordenable que está utilizando connectWith para asegurarse de que solo se puede ordenar dentro de sus propios tipos de lista.

Ahora estoy tratando de hacer un elemento de papelera que se puede depositar en la parte inferior de la ventana cuando se ordena un artículo. Este elemento está fuera del contexto de las listas y simplemente borra cualquier elemento que se deje caer sobre él. La funcionalidad deseada es idéntica a eliminar un atajo del escritorio de un teléfono Android, si está familiarizado con eso.

El problema es que aunque mi bote de basura es un droppable que acepta '*', mi ordenado solo se dice connectWith otros elementos '.dropZone', lo que significa que no puedo obtener ninguno de mis elementos ordenables para provocar estado en el elemento de basura.

He intentado hacer cada ordenable en un evento arrastrable en el evento start, pero por supuesto no estoy arrastrando ese arrastrable en el momento exacto y por lo tanto no está activado. ¿Es posible satisfacer ambos requisitos o tendré que detectar que la papelera puede desplazarse manualmente?

Answer 1

¿Qué tal hacer la basura puede ser .dropZone también? Entonces obtendría un evento apropiado drop, y podría manejar la eliminación correctamente.

Puede haber efectos secundarios de hacer que la basura se pueda ordenar, pero creo que deberían ser fáciles de evitar.

Si esto no cumple con sus requisitos, ¿podría lanzar una demostración somewhere, por lo que sabemos exactamente lo que tendríamos que trabajar para mantener su estructura intacta, sin dejar de agregar la funcionalidad que necesita?

Answer 2

Dado que connectWith acepta un selector, puede proporcionarle un selector que seleccione tanto las otras listas conectadas como su papelera.

$("#sortable1, #sortable2").sortable({ 
    connectWith: '.connectedSortable, #trash' 
}).disableSelection(); 

$("#trash").droppable({ 
    accept: ".connectedSortable li", 
    hoverClass: "ui-state-hover", 
    drop: function(ev, ui) { 
     ui.draggable.remove(); 
    } 
}); 

Ejemplo: http://jsfiddle.net/petersendidit/YDZJs/1/