html5 - example - Ventajas de HTML 5 Arrastrar y soltar sobre jQuery UI Arrastrar y soltar

drag and drop jquery ejemplos

Question

Estoy escribiendo una nueva aplicación web que debe ser compatible con las operaciones de arrastrar y soltar para elementos en la página (no arrastrar y soltar archivos).

Esta es la respuesta a esta pregunta.

html5 vs jquery arrastrar y soltar

recomienda utilizar Modernizr para verificar si el navegador admite arrastrar y soltar HTML5 y usar ese soporte o recurrir a una alternativa como jQuery UI.

Ya que tienen modelos muy diferentes, eso significa que todo el código de arrastrar y soltar debería implementarse y probarse por separado (muy poca implementación compartida). Parece lógico hacer eso si hay beneficios significativos para el usuario en el arrastrar y soltar de HTML5 y si la alternativa a la interfaz de usuario jQuery proporcionaría una experiencia degradada.

¿Existen beneficios significativos al implementar ambas variantes?

Answer 1

Acabo de convertir un script para usar un script de arrastrar / soltar basado en HTML5 en lugar del jQueryUI, porque con el tamaño de lo que estaba tratando de ordenar, tomó 19 segundos inicializar la versión jQueryUI y .19 segundos inicializar. La versión HTML5.

Entonces ventaja: velocidad

Answer 2

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

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

Answer 3

Estoy respondiendo específicamente con respecto a dnd, ya que parece ser lo que estabas preguntando. Creo que algunas personas confunden jQuery con jQueryUI. El uso nativo de HTML5 dnd 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, el soporte del navegador es bastante bueno en todos los ámbitos (incluido IE7, y quizás incluso más antiguo). El uso de jQuery le da a todos los navegadores addClass() , removeClass() , etc. utils que son cruciales.

jQueryUI, por otro lado, ofrece una gran cantidad de características que probablemente no necesitarás. Dado que su dnd se basa en eventos de mouse y no en dnd nativo, el rendimiento no será tan bueno. jQueryUI no debe confundirse con jQuery. jQueryUI no ha recibido ninguna actualización importante en más de 2.5 años. (Sí, jQueryUI 1.8rc1 estaba en enero de 2010) Entonces, no es tan simple decir que agregarán soporte nativo en el futuro, al ritmo que han estado actualizando, no contendría la respiración.

Answer 4

Supongo que con el tiempo jQuery aprovechará las capacidades del navegador incorporado como html 5 arrastrar y soltar.

Y si diferentes navegadores lo implementan de manera diferente ... jQuery se ocupará de ello.

Answer 5

Ok, después de haber implementado ambos, recomendaría hacerlo manualmente con los eventos mousedown / mousemove (básicamente como lo hace jquery UI).

Estoy de acuerdo en 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 navegadores modernos? Porque html5 DnD sux! Puede ser nuevo para los navegadores actuales, pero está modelado después de una implementación anterior en IE5.

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

-Pablo