jQuery UI ordenable: no se pueden arrastrar elementos a la parte inferior de una lista/columna conectada

Question

Tengo un problema con jQuery ordenables. Lo estoy usando para desarrollar un panel similar a iGoogle al crear 3 columnas. Los 3 contienen divisores ordenables y están conectados entre sí mediante la opción connectWith.

El problema que estoy teniendo es cuando trato de colocar un div en la parte inferior de una columna clasificable; simplemente no quiere suceder. Solo funciona si lo arrastrar/más allá del div inferior que ya está en la lista a la que estoy arrastrando.

¿Hay alguna manera de evitar esto? ¿O tal vez para crear un div ficticio fijo en la parte inferior de cada columna? ¡Cualquier ayuda en esto sería muy apreciada!

Gracias de antemano.

Answer 1

vieja pregunta, pero tal vez para ayudar a los demás ...

obras de relleno sino que cambia su tratamiento visual.

Otra solución es usar 'tolerancia' proporcionada por la API ordenable. Un valor de tolerancia de 'puntero' significa que mientras el cursor del usuario esté sobre uno de los otros elementos, el elemento puede reemplazar su posición (en lugar de una cierta cantidad de espacio sobre el elemento, por lo que tiene problemas sin relleno) .

Intente agregar esto a su inicialización (en mi ejemplo estoy ordenando una lista verticalmente).

 $(this.$el).sortable({ 
      axis: 'y', 
      cursor: 'move', 
      containment: 'parent', 
      tolerance: 'pointer' // this is the important bit 
     }); 

Debería ser muy rápido después de hacer eso.

También se puede ver el doc jQuery sobre ella aquí:

Answer 2

Las columnas que contienen los divs necesitan un fondo de relleno razonablemente grande para extender el área que se puede arrastrar más allá del div inferior. De lo contrario, las columnas abrazan fuertemente a los divs y el área debajo de cada div inferior se encuentra fuera de la lista ordenable.