2012-08-02 13 views
5

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).

+0

Revisaría este artículo http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html – darksky

+1

@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

+1

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

Respuesta

8

El problema es que está intentando hacer que los elementos td se puedan arrastrar. Cuando elimina/inserta elementos td de una tabla como esa, debe crear un grupo de celdas vacías para equilibrarlo. Sugeriría mantener la tabla intacta y envolver elementos arrastrables en una etiqueta div o span. De esta manera, la estructura de la mesa nunca cambia. Tu código también será mucho más simple y eficiente.

+1

+1 Acepto. Incluso puede omitir el dolor de cabeza de arrastrar y soltar y lograr esto simplemente mediante eventos de mouse. – darksky

+0

@darksky Intenté hacer algo con la API de DnD y tanto Firefox como Safari me estaban molestando.Especialmente cuando quería cambiar la indicación visual del objeto mientras arrastraba. Terminé volviendo a jQuery-ui. Creo que todavía tiene un largo camino por recorrer para ser utilizable. Puede haber mejorado últimamente. No me he molestado desde entonces. Dolor de cabeza de hecho! – SMathew

+0

Creo que veo lo que ustedes quieren decir. Volví al tablero de dibujo y reescribí todo. El nuevo violín está en la actualización de mi pregunta. Aceptaré tu respuesta, pero aún agradeceré alguna ayuda/sugerencia sobre el nuevo violín, ya que está teniendo sus propios problemas. – Gup3rSuR4c

Cuestiones relacionadas