jQuery UI drop en contenedor vacío / lista no funciona

Tengo un problema con el widget de la interfaz de usuario jQuery. Simplemente no puedo dejar ningún artículo en un contenedor vacío. Cuando el contenedor tiene un artículo funciona perfectamente. Llamo al widget así:

$(".apc_row--columns", this.$el).sortable({ placeholder: 'apc_drop-placeholder-blocked', forcePlaceholderSize: true, items: '.apc_inner_item', connectWith: ".apc_column--content", tolerance: "pointer", handle: '.move_handle', helper: "clone", dropOnEmpty: true, distance: 0.5, stop: function(event, ui){ that.droppedItem(ui.item, ui.item.index()); } }); 

La búsqueda descubrió que la lista / contenedor conectado necesita un relleno / min-height para que jQuery pueda calcular la posición correctamente.

Pero el div conectado “.apc_column – content” tiene una altura mínima y también un relleno. También probé para poner un elemento con “display: none” en el contenedor, pero eso no ayudó.

Simplemente no puedo hacerlo funcionar (probé todos los navegadores) y realmente agradecería cualquier ayuda.

Gracias.

EDIT: hizo un jsfiddle para el problema: http://jsfiddle.net/Sf5QW/1/

Si mueve todos los elementos de la lista de la izquierda a la derecha (o de otra manera) no puede mover ningún elemento a la lista vacía.

FIDDLE DE TRABAJO

Básicamente, estaba configurando el ordenable en el elemento incorrecto. Lo cambio al elemento de contenido .apc_column y ahora funciona. Como ambas listas tienen esa clase, también tuve que cambiar la propiedad connectWith a eso.

Aclamaciones.

 $(".apc_column--content").sortable({ placeholder: 'apc_drop-placeholder-blocked', forcePlaceholderSize: true, items: '.apc_inner_item', connectWith: ".apc_column--content", tolerance: "pointer", dropOnEmpty: true, distance: 0.5, stop: function(event, ui){ // that.droppedItem(ui.item, ui.item.index()); } }); 

Podrías agregar un

  • vacío a la ul vacía para resolver este problema. ^ _ ^