2012-03-01 15 views
26

Estoy escribiendo una nueva aplicación web que necesita admitir operaciones de arrastrar y soltar elementos en la página (no arrastrar y soltar archivos).Ventajas de HTML 5 Arrastrar y colocar sobre jQuery UI Arrastrar y soltar

Esta la respuesta a esta pregunta

html5 vs jquery drag and drop

recomienda el uso Modernizr para comprobar si el navegador es compatible con HTML5 arrastrar y soltar y ya sea el uso que apoyan o se caiga de nuevo a una alternativa como jQuery UI.

Dado que tienen modelos bastante diferentes, eso significa que todos los códigos de arrastrar y soltar tendrían que implementarse y probarse por separado (muy poca implementación compartida). Parece lógico hacerlo si hay beneficios significativos que afectan al usuario en HTML5 arrastrar y soltar, y si la alternativa a la interfaz de usuario jQuery proporcionaría una experiencia degradada.

¿Hay ventajas significativas en la implementación de ambas variantes?

+0

¿Por qué cerrar la votación? Parece razonable saber si existen beneficios para la función de arrastrar y soltar HTML5 de los que no tengo conocimiento que justifiquen proporcionar implementaciones duales. Si no es una pregunta válida, por favor comparta por qué. –

+0

Eric: Para mí no está claro qué tipo de respuesta buscas. Es una de esas preguntas "¿Cuáles son los pros y los contras?" O "¿Qué debo usar para mi proyecto?". Usted sabe que HTML5 arrastrar y soltar no es un navegador cruzado, usted sabe cómo recurrir a la implementación de js: ¿cuál es la pregunta técnica aquí? Lo admito, puede que me lo esté perdiendo. –

+0

@Madmartigan: No, estoy preguntando si hay algo que HTML5 arrastrar y soltar es mejor que jQuery UI arrastrar y soltar. Sé que tengo que implementar la versión de jQuery porque no todos los navegadores son compatibles con HTML5. Estoy detrás de si hay beneficios (más rápidos, más suaves, lo que sea) para la versión HTML5 que no conozco que justifiquen un esfuerzo de desarrollo adicional además del desarrollo para jQuery UI. Las respuestas que he visto en la red parecen ser "hacer ambas cosas", y eso no tiene sentido para mí dado lo que sé actualmente. –

Respuesta

12

Supongo que eventualmente jQuery aprovechará las capacidades integradas del navegador como html 5 drag and drop.

Y si los navegadores diferentes lo implementan de manera diferente ... jQuery lo resolverá.

+0

Perdón por el voto negativo, estoy seguro de que quiso decir ** jQuery-ui ** y no ** jQuery **. http://wiki.jqueryui.com/w/page/12137878/Draggable – jozecuervo

12

Creo que la mayor ventaja de arrastrar y soltar HTML5 sobre jQuery es la eliminación de la considerable biblioteca jQuery UI y los archivos css.

Dicho esto, existe el problema actual de la compatibilidad del navegador que hace que jQuery sea muy necesario.

+2

Ese es un buen punto. –

+0

También velocidad. jQuery UI dnd con muchos juegos de arrastre en la página es bastante lento. Después de cambiar a HTML5 dnd, las páginas respondieron más rápido. Pero la API dnd de HTML5 es extraña y le faltan muchas cosas en comparación con jQUI :( – Alex

3

Estoy respondiendo específicamente con respecto a dnd, ya que parece ser lo que estaba preguntando. Creo que algunas personas confunden jQuery con jQueryUI. Usar HTML5 nativo junto con jQuery es una gran combinación, tanto en rendimiento como en tiempo de desarrollo. Dado que las características de dnd provienen del mundo de IE, la compatibilidad con el navegador es bastante buena en todos los ámbitos (incluido IE7 con seguridad, y tal vez incluso más). El uso de jQuery le brinda todos los navegadores cruzados addClass(), removeClass(), etc. utilidades que son cruciales.

jQueryUI, por otro lado, ofrece un montón de funciones que probablemente no necesitará. Como su dnd depende de eventos de mouse y no es nativo, el rendimiento no será tan bueno. jQueryUI no se debe confundir con jQuery. ¡jQueryUI no ha recibido actualizaciones importantes en más de 2.5 años! (Sí, jQueryUI 1.8rc1 estaba en JAN 2010) Por lo tanto, no es tan simple decir que agregarán soporte nativo en el futuro, al ritmo que han estado actualizando no contaría con la respiración.

7

Bien, habiendo implementado ambos, recomendaría hacerlo manualmente con los eventos mousedown/mousemove (básicamente como lo hace la interfaz de usuario jquery).

Acepto que jQuery UI puede ser un poco pesado, pero hay muchos tutoriales/fragmentos de código disponibles para codificarlo usted mismo.

¿Por qué recomiendo un enfoque manual en lugar de la implementación nativa en los navegadores modernos? Porque html5 DnD sux! Puede ser nuevo para los navegadores actuales, pero se modela después de una implementación anterior en IE5.

Si está hablando de mover cosas entre windows desde el escritorio, entonces quizás considere usar html5 DnD ya que tiene ganchos de navegador/sistema operativo. De lo contrario, si simplemente está moviendo nodos DOM en una sola página web, hágalo manualmente con eventos de mouse js.

-Paul

+11

¿Es sux? ¿Se puede traducir eso en términos técnicos? –

+0

bien, técnicamente html5 tiene una implementación terrible. En lugar de duplicar el lado técnico de la explicación, Buscaré google para html5 arrastrar y soltar sux. Bien, aquí están los dos primeros resultados: http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html y http://pxdraw.com /HTML5DragAndDropSucks.com/#slide12 –

+2

Personalmente, ya había leído el primer enlace antes de comenzar mi propia implementación y lo lamento. Es por eso que estoy publicando aquí, para salvar a otros desarrolladores el dolor de hackearlo. Estoy seguro de que esa también fue la motivación de PKK, pero como todos ustedes que leerán esto y luego aún implementarán HTML5 DnD, estoy duro :) –

0

Acabo de convertir una secuencia de comandos para utilizar un lastre basado en HTML5/dejar la escritura se puede ordenar en lugar de la jQueryUI uno, porque con el tamaño de lo que estaba tratando de resolver, que tomó 19 segundos para inicializar la versión jQueryUI y .19 segundos para inicializar la versión HTML5.

Así que la ventaja: velocidad