jquery ordenable y redimensionable con elementos de lista superpuestos

Question

Tengo varias listas ordenables una al lado de la otra. Puede cambiar el tamaño del ancho de los divs para cubrir otras listas. Esto permite que un elemento sea parte de más de una lista.

Quiero hacer esto sin que ninguno de los divs divisibles se superponga.

Ver el violín en http://jsfiddle.net/2J6af/

EDIT: Si vas al violín arriba y extender el ancho de un elemento puede ordenar, a continuación, pasar a su alrededor y soltar. Verás que se superpone a otros elementos ordenables. Quiero que todos los elementos ordenables se organicen para que no haya superposición.

EDITAR: He pasado por Dealing with overlapping jQuery sortable lists nuevamente como lo sugiere @KateA, y aunque es similar, se trata de las listas que se superponen en lugar de los elementos ordenables que cubren múltiples listas.

EDITAR: En el producto final habrá 7 listas una al lado de la otra, y tengo que reorganizar las sobables en un orden específico después de que el usuario haya soltado un artículo. Sé que puede agregar una función al tipo: evento, ¿tal vez esta es la función clave para reorganizar y verificar/corregir cualquier elemento superpuesto?

EDITAR: También he notado que el elemento ordenable se comporta de manera diferente al arrastrar dependiendo de si lo ha redimensionado usando el controlador izquierdo o derecho. Se confunde con la lista sobre la que te estás moviendo. p.ej. Si cambiaste el tamaño con el asa izquierda y la levantas e intentas colocarla en la lista central o derecha, se colocará en la lista que se encuentra a la izquierda del puntero del mouse en lugar de mostrar un marcador de posición vacío debajo del mouse. puntero.

EDIT: El jquery fullCalendar hace exactamente lo que necesito, pero ¿cómo lo hicieron? http://arshaw.com/fullcalendar/

EDIT: He estado trabajando para extender el violín en la medida de mis conocimientos de sortables, ¿crees que estoy en el camino correcto? http://jsfiddle.net/2J6af/17/

Answer 1

Hay algunos problemas con lo que está intentando pero he logrado hacer un example que corrige algunos de ellos. El problema general es que esos dos complementos de Jquery UI (ordenables, redimensionables) no admiten todas las características que desea, por lo que al menos uno, si no, ambos tendrán que ser reescritos o implementados desde cero. Algunos problemas incluyen:

1. El asa oeste provoca que el ancho aumente y la propiedad css 'left' disminuya, causando problemas con los elementos de la lista en el lado izquierdo. El mismo problema existe con el este y el lado derecho.
2. Tener los elementos de la lista posicionados 'relativos' o 'absolutos' hará que no ocupen espacio en el flujo de la página, de ahí la superposición.
3. Tener tres divisiones separadas significa que cada elemento solo puede ser miembro de una lista y debe verificar el ancho para ver si también ocupa otras columnas. Es un poco desordenado

Además del ejemplo que he proporcionado, creo que debe mantener un modelo de datos programáticamente que haga un seguimiento de cada elemento y en qué columnas exista y permita correcciones en la pantalla según sea necesario.

He llegado a la conclusión de que esto es todo lo relacionado con la representación de una semana y las cosas que están sucediendo en ese período de tiempo. Si bien creo que he abordado los principales problemas de su pregunta, encuentro este problema entretenido y si proporciona más contexto, estaría dispuesto a ayudarlo con el producto final.

Answer 2

fullcalendar parece tener una cuadrícula visual en el fondo, con los elementos ordenables en la parte superior de una cuadrícula virtual, por lo que es muy probable que calculen sus posiciones manualmente.

La forma en que jQueryUI hace la clasificación es agregando un marcador de posición a la lista, que naturalmente (flujo de página) muestra el espacio para la caída . Sugeriría que no lo haga así, no creo que haya una forma de poder limpiar hack jQueryUI para tener el comportamiento que está buscando.

Yo sugeriría que hacer lo mismo que fullcalendar, utiliza los que pueden arrastrarse y de tamaño variable plugins, y mover los elementos fuera del camino con posiciones absolutas cuando el se solapan con otros elementos.

No configure la función de ajuste como arrastrable, pero según la posición del arrastrable, calcule las colisiones y decida cómo manejarlas, ya sea moviéndolas hacia arriba o hacia abajo.