Lamentablemente, el método es defectuoso. El uso de jquery ordenable con un diseño de cuadrícula de diferentes tamaños dará como resultado este comportamiento. La razón es que en html y css, está creando una lista de elementos flotados a la izquierda, que cuando se permite envolverlos en un contenedor de ancho fijo, dejarán huecos que son efectivamente inutilizables.
El hecho de que el ancho de su contenedor sea fijo y sus cajas sean de tamaño fijo significa que sería fácil probar otra forma de colocarlas. Intente utilizar el posicionamiento absoluto usando solo css y html para llenar todos los espacios exactamente como inicialmente los quiere, luego experimente con el javascript para mover los cuadros.
Sin embargo, dudo que la biblioteca 'ordenable' jQuery funcione cuando se usa posicionamiento absoluto (debo admitir que nunca la he usado) Con un posicionamiento absoluto, es probable que los elementos se "salgan del camino" cuando arrastra algo sobre ellos, será problemático. Es posible que necesite definir un conjunto de divs ocultos que actúen como su 'grilla' - o lugares donde puede colocar cosas, y otro conjunto de divs que contienen las cosas visibles que desea mover. La API jQuery que se puede arrastrar y dropear ayudará, pero necesitará hacer mucha más codificación para asegurarse de que los elementos se muevan instantáneamente, moviendo a otros para que no se interpongan cuando los suelte.
Esto parece relacionado https://stackoverflow.com/questions/2133677/jquery-sortable-divs-replicate-bbc-home-page tal vez podría consultar el código fuente de la página de BBC. http://bbc.co.uk
Gracias Greg, ancho de columna fijo no es una opción para mi cliente. He visto las soluciones de la BBC antes, desafortunadamente parece que la BBC eliminó su función de arrastrar y soltar basada en columnas. – anderssonola
La solución en Citifirst, parece funcionar como @ Gregg-Woods sugiere ... [se.citifirst.com] (https://se.citifirst.com/SV/Showpage.aspx) – anderssonola