He estado usando jsfiddle.net para probar y crear un prototipo de un programador donde los elementos a programar se arrastran y se sueltan en él. He estado arrastrando y soltando desde una lista "sin asignar" y trabajando en la tabla de programación. También obtuve la habilidad de eliminar de la tabla de programación el trabajo. Lo que me está costando pasar es mover un elemento de la mesa a otra parte de la mesa.jQuery y HTML5 Arrastrar y soltar en la tabla (Programador)
El violín se encuentra here. Agradecería cualquier sugerencia para hacer que funcione el arrastre y la caída internos. He estado trabajando en esto todo el día y estoy empezando a tener una visión borrosa. Ah, y si crees que lo que estoy haciendo se puede hacer mejor, por favor haz el cambio, solo dígame qué versión está haciendo el violín.
ACTUALIZACIÓN
Según @SMathew y @darksky He reconstruido todo el violín en la que no estoy cambiando directamente las celdas de la tabla alrededor, pero en cambio su contenido.
Sé que ustedes recomienda el uso de div
s y/o span
s, pero yo quiero usar la estructura de la tabla, en especial el rowspan
para designar a la altura de la celda en incrementos de 30 minutos. Funciona mucho mejor ahora, con el único error moviendo las células (o más sus contenidos) porque tengo que restaurar las células afectadas por el rowspan
en el sitio de origen y eliminar las células que entrarán en conflicto con el rowspan
en el sitio de destino .
El violín actualizado se puede encontrar here.
ACTUALIZACIÓN 2 (FINAL)
Así que regresó a la mesa de dibujo de nuevo, y después de 64 violines, finalmente lo consiguió a hacer lo que quiera. Al final, el truco para hacer que todo funcione bien sin manipular la estructura de la mesa. Todo lo que tenía que hacer era establecer las celdas que están en el camino de una rowspan a display: hidden
.
De todos modos, para cualquiera que esté interesado, el nuevo violín es here. Descubrí que Chrome tiene algunos problemas para manejar la API. Los he anotado en el violín (junto con una diatriba parcial).
Revisaría este artículo http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html – darksky
@darksky, sí, he leído ese artículo. Señalaré que fue publicado hace unos 3 años. Es probable que la especificación no haya cambiado desde entonces, pero apuesto a que el soporte del navegador probablemente se haya estabilizado y se haya vuelto más robusto. No es tan difícil trabajar con la API para ser honesto y al final del día, el artículo no me sirve para entender cómo lograr lo que quiero. De hecho, estoy apostando a que lo que me falta en la funcionalidad es una lógica de JavaScript más regular que la lógica de la API de Arrastrar y Soltar. – Gup3rSuR4c
bien. Yo personalmente lo haría como lo hace Google Calendar: mover divs delante de la tabla de calendario para mostrar eventos en lugar de manipular la tabla como lo está haciendo. – darksky