React-dnd: ¿Quién usa React DnD?

• Proyecto: https://github.com/WikiEducationFoundation/WikiEduDashboard
• Utilidad: Muy
• Problemas: las animaciones impulsadas por el estado fueron la parte más difícil. Terminé con una combinación de grupos de transición react-motion y react css. Luego, tuve que administrar un estado adicional para las cosas que estaban en medio de la animación para evitar que se conviertan en objetivos durante la animación. Terminé usando https://github.com/yahoo/react-dnd-touch-backend , que tenía sus propios problemas (el texto se seleccionaba durante el arrastre) pero era más controlable _durante_ las animaciones. Probablemente pasé ~ 4 días de trabajo en esta función y en hacer las animaciones correctas, lo que probablemente habría llevado mucho menos tiempo en una aplicación sin reacción.

_- ¿En qué productos estás usando React DnD?_

Lo estoy usando en varias aplicaciones (tablero Kanban, aplicaciones de línea de negocios)

_- ¿Qué tan útil te parece?_

Antes de React DnD, probé todas las soluciones de DnD que pude encontrar, tanto basadas en React como en jQuery, y React DnD está muy por delante.

_- ¿Con qué frecuencia tiene problemas con él y qué tan frustrantes son?_

Desde 1.0, no he encontrado ningún problema. Vale la pena señalar que solo admito navegadores modernos en mis productos.

_- ¿Qué características te interesan?_

Estoy usando todas las funciones, en diferentes combinaciones en diferentes áreas.

_- ¿Puedes adjuntar un par de capturas de pantalla de tu producto?_

Lo integré ayer con un proyecto privado (no puedo dar pantallas en este momento, lo siento), y la documentación existente me pareció excelente. El enfoque es limpio, fácil de entender, simple de aumentar y, en general, amigable.

Realmente no he encontrado ningún problema con el kit, sinceramente. Creo que su simplicidad es realmente la característica más importante, además de que alienta a las personas que lo usan a orientarse hacia las mejores prácticas como los HOC.

¿En qué productos está utilizando React DnD?

Lo usamos en nuestra nueva consola web en Treasure Data. También lo he usado para proyectos personales.

¿Qué tan útil lo encuentras?

Muy útil. Es fácilmente la mejor librería de arrastrar y soltar que he usado. Estoy muy seguro de que se puede usar para implementar interacciones sofisticadas de arrastrar y soltar con facilidad.

¿Con qué frecuencia tiene problemas con él y qué tan frustrantes son?

Cada vez que uso la biblioteca, me toma un tiempo recordar cómo se combina todo: a dónde va cada parte y qué hace. Esto sucede incluso después de haberlo usado varias veces.

Quizás tener una visualización para mostrar todas las partes haría que sea más fácil de recordar.

En general, parece que la biblioteca hace todo lo que necesito que haga.

¿Qué características te interesan?

Testabilidad! Mis experiencias anteriores con arrastrar y soltar fueron bastante malas, y nadie probó su código relacionado con arrastrar y soltar.

No he realizado ningún tipo de soporte para dispositivos móviles, pero no sé cómo me orientaría tanto para computadoras de escritorio como para dispositivos móviles.

He visto react-dnd-touch-backend , pero no sé cómo combinaría ambos.

¿Puedes adjuntar un par de capturas de pantalla de tu producto?

https://gfycat.com/ScientificEvilAmericanbadger

Esto es básicamente yo jugando. react-dnd hace que sea trivial implementar la zona de colocación de archivos.

¿En qué productos está utilizando React DnD?

codecks.io todavía en desarrollo pero cerca del acceso anticipado

¿Qué tan útil lo encuentras?

Mucho. La normalización del comportamiento del navegador y la oferta de un enfoque de reacción para dnd hacen que esta biblioteca sea una obviedad para mí.

¿Con qué frecuencia tiene problemas con él y qué tan frustrantes son?

La documentación es excelente, pero cuando comencé a trabajar con ella, me encontré con problemas sorprendentes en los que no funcionaba sin mensajes de error, no podía reproducirla de manera confiable, pero probablemente tenía que ver con objetivos de arrastre de altura cero.

¿Qué características te interesan?

Normalización del navegador, soporte para interacciones táctiles

¿Puedes adjuntar un par de capturas de pantalla de tu producto?

https://gfycat.com/CleanLegitimateAracari

He usado React DnD en mi trabajo de doctorado en un motor de búsqueda de archivos de imágenes médicas. Me permite arrastrar los resultados de la búsqueda para que se conviertan en parte de la consulta (produciendo imágenes similares). Si no hubiera habido una biblioteca como esta, habría tenido que jugar con la API de HTML5 y asegurarme de que funciona bien junto con React. ¡Cualquier cosa que me permita concentrarme en asuntos más importantes es oro!

No he tenido problemas serios, pero la transición de 0.x a 1.x fue muy confusa y un buen ejemplo donde las etiquetas dist no se usaron correctamente (1.0.0-rc se lanzó como latest sin actualizar documentación). Todo esto es agua debajo del puente, de todos modos. :)

1.0.0-rc fue lanzado como último sin documentación actualizada

Sí, esto fue antes de que aprendiera cómo funcionan las etiquetas de distribución. :alegría:

¿En qué productos está utilizando React DnD?

Usándolo para un proyecto de cliente que tiene mucha interacción de arrastrar y soltar. Algunos de los componentes notables son:

• Una vista de árbol donde puede ordenar y anidar nodos
• Una vista de lista/tarjeta similar a Trello, solo admite la clasificación.

También es una herramienta de colaboración, por lo que la mayoría de las actualizaciones de la interfaz se envían a un servidor de socket.

¿Qué tan útil lo encuentras?

Muy útil, es muy fácil separar la lógica de arrastre de su componente y probarla individualmente.

¿Con qué frecuencia tiene problemas con él y qué tan frustrantes son?

Nos enfrentamos a muchos problemas con la vista de árbol que admite el anidamiento y la clasificación,

Uno de los mayores problemas que experimentamos fue implementar la vista de árbol que admite el anidamiento y la clasificación.

Tenemos diferentes tipos de nodos (carpetas, listas). Un usuario puede colocar algo en una carpeta que hará que se anide u ordenarlo debajo o encima de otro nodo. Esta interacción viene con mucho parpadeo, un comportamiento defectuoso y ocasionalmente una disminución en el rendimiento. Vea este video: http://s.2to1.be/fAtX ,

La forma en que funciona es la siguiente:

1. El usuario comienza a arrastrar un nodo, el nodo permanece en su posición
2. El usuario se desplaza sobre un nodo -> muestra un indicador de la nueva posición, la posición de esto se envía con una acción de reducción. (el árbol completo es parte del estado de la aplicación).
3. El usuario finaliza el arrastre que envía una acción que persiste en la nueva posición del nodo en el servidor y la transmite a todos los clientes de socket conectados.

Actualmente, usamos algunas matemáticas (una variación del ejemplo ordenable en este repositorio) para calcular si un nodo está encima o debajo de una carpeta. Inicialmente, traté de convertir el componente Folder en DropTarget pero no funcionó porque no pude ordenar los otros Node DropTarget

¿Qué características te interesan?

• Testabilidad
• Cambiar backends
• Conexión a eventos
• Compatibilidad con navegador

¿Puedes adjuntar un par de capturas de pantalla de tu producto?

Ver el vídeo de arriba

Acabo de agregar react-dnd la semana pasada a una aplicación web educativa (aún por lanzar). ¡Es asombroso! ¡Muchas gracias por su trabajo!

En mi opinión, la mayor victoria es que react-dnd proporciona el nivel adecuado de abstracción para administrar la funcionalidad DnD en toda la aplicación.

Además de poder deshacerme de la combinación incómoda de componentes de arrastre aislados, de talla única (clasificable, etc.), pude agregar algunas funciones basadas en arrastre en cuestión de horas que anteriormente había descartado como demasiado complicadas. vale la pena (por ejemplo, arrastrar una tarjeta para reordenarla dentro de su lista O sobre un icono de lista de usuarios para mostrar una lista de usuarios y luego soltarla sobre el usuario apropiado).

El único problema con el que me encontré hasta ahora fue en el backend táctil, pero pude hacer un truco rápido para avanzar y alguien comentó que están trabajando en una solicitud de extracción más general.

La característica principal que me importa dada la ya maravillosa API es el soporte táctil sólido.

Hablando personalmente de por qué no hago solicitudes de extracción para proyectos de código abierto (hasta ahora, de todos modos)... Soy diseñador. Aunque uso esta herramienta, por ejemplo, mi cabeza está naturalmente pensando en diferentes tipos de problemas. Además de simplemente no ser bueno para resolver problemas que surgen en bibliotecas como esta, realmente no es el tipo de trabajo que normalmente hago y no "confiaría" en mi solución. Sé que hay una cierta cantidad de egoísmo aquí, pero me imagino que hay más de unos pocos diseñadores que también codifican en el desarrollo front-end que actúan de esta manera. Estoy muy agradecido por las personas como usted que están dispuestas a ayudar a los diseñadores como yo con herramientas que acercan las complejidades del desarrollo de aplicaciones a las complejidades del diseño de productos para que moverse entre los dominios sea menos molesto.

Para su información, estoy usando react-dnd en combinación con react-flip-move para animar cambios de diseño. Solo han pasado unos días, pero parecen emparejarse muy bien juntos.

@arstin

Esto me alegró el día por completo. :corazón:

_¿En qué productos está utilizando React DnD?_
El producto aún está en secreto.

_¿Qué tan útil lo encuentras?_
Muy útil, tenemos muchos tipos de arrastrar y soltar. Mantener la lógica DnD dentro de los componentes ha ayudado a nuestros cerebros a gestionar toda la complejidad.

_¿Con qué frecuencia tiene problemas con él y qué tan frustrantes son?_
Tenemos algunos problemas con el rendimiento debido al gran volumen de objetivos de caída que registramos. De lo contrario, funciona muy bien!

_¿Qué características te interesan?_
Rendimiento y compatibilidad SVG.

¿Puedes adjuntar un par de capturas de pantalla de tu producto?
No en su totalidad, pero esto le dará una idea del problema que estamos tratando de resolver con React-DnD.

La aplicación funciona como un editor de mapas de juegos de estrategia. Puede arrastrar y soltar nuevos elementos en el mapa según una serie de reglas y también mover elementos por el mapa. No estamos construyendo un juego en línea, sino que usamos algunas de las ideas para resolver otros problemas de mapeo (de nuevo, no puedo mencionarlos todavía).

¡Muchas gracias por una gran biblioteca!

Este es un salvavidas si estás usando reaccionar y tienes que hacer cosas de dnd. ¡Buen trabajo!

Uso React DND en nuestro software de gestión de transporte . hasta ahora no tuve problemas en absoluto.

el usuario arrastra las paradas de entrega y las ve directamente en un mapa con las distancias calculadas.

¿En qué productos está utilizando React DnD?

CMS basado en bloques de arrastrar y soltar (otra versión beta interna, que se lanzará para un cliente en abril)

¿Qué tan útil lo encuentras?

Inmensamente. Aunque la API no es _exactamente_ tan sencilla como algunos otros componentes de terceros, es súper poderosa y realmente te permite hacer lo que necesites.

¿Con qué frecuencia tiene problemas con él y qué tan frustrantes son?

Rara vez y no muy frustrante.

¿Qué características te interesan?

Estabilidad y protección contra balas entre navegadores.

¿Puedes adjuntar un par de capturas de pantalla de tu producto?

¿En qué productos está utilizando React DnD?

Usamos React DnD en la aplicación web de Asana , para todos los lugares donde usamos arrastrar y soltar. Tenga en cuenta que actualmente estamos reescribiendo nuestra aplicación desde nuestro marco interno de Luna a React, y estamos usando React DnD durante la reescritura en todos los lugares donde usamos arrastrar y soltar.

¿Qué tan útil lo encuentras?

Lo hemos encontrado muy útil. Es fácil trabajar con la API y nos permite tener una separación clara de las preocupaciones al mantener el arrastrar y soltar dentro de unos pocos componentes.

¿Con qué frecuencia tiene problemas con él y qué tan frustrantes son?

Aparte del aumento inicial, no solemos tener problemas con él. Usamos React DnD con TypeScript, y creo que escribir las definiciones de tipo redujo el período de aceleración para nosotros (ya que tuvimos que explorar toda la API en el proceso). Ahora, nuestros problemas generalmente se relacionan con las pruebas (por ejemplo, limpieza entre pruebas, ayudantes internos para trabajar con los componentes decorados con dnd, etc.). Esto a veces es frustrante, pero menos ahora que tenemos algunos componentes de uso general para usar o componentes de ejemplo para basar los futuros.

¿Qué características te interesan?

Desempeño, separación de preocupaciones, capacidad de prueba

¿Puedes adjuntar un par de capturas de pantalla de tu producto?

@epelz Probablemente deberías conseguir que Asana lo patrocine, de lo contrario, el proyecto se ralentizará.

ya sea https://github.com/Asana o https://github.com/FogCreek , que hacen Trello, que definitivamente usa react-dnd, podrían ser grandes patrocinadores.

@gaearon mejor aún que facebook lo patrocine

¿En qué productos está utilizando React DnD?

La próxima generación de nuestra interfaz de usuario.

¿Qué tan útil lo encuentras?

¡Extremadamente! Me gustan los documentos, pero podría usar más ejemplos del mundo real.

¿Con qué frecuencia tiene problemas con él y qué tan frustrantes son?

Acabo de encontrar un problema al decorar un componente con DragSource que impide que el método componentWillUpdate se ejecute cuando cambian los accesorios. Súper frustrante, así que supongo que debería presentar un error. Aunque supongo que soy yo y no tú. ;)

¿Qué características te interesan?

Rendimiento, estabilidad y soporte táctil.

¿Puedes adjuntar un par de capturas de pantalla de tu producto?

Todavía no, me temo, pero piense en listas con reordenación y arrastre de cosas desde nuevas listas. Bastante simple en comparación con los otros ejemplos aquí.

¿En qué productos está utilizando React DnD?

En @teleport usamos React DnD en nuestro producto Zen (lista de verificación móvil) para reordenar y categorizar las tareas.

Además, acabamos de crear un componente de vista de árbol reutilizable react-dnd-treeview con soporte DnD implementado usando React DnD para usar en un proyecto interno actual. Usamos react-ui-tree al principio, pero no pudimos obtener la experiencia de usuario correcta y tuvimos una experiencia positiva con React DnD, por lo que implementamos la nuestra. El componente se encuentra en etapas muy tempranas, por lo que aún no hay documentación, CI, etc., ¡pero cualquier comentario será bienvenido!

¿Qué tan útil lo encuentras?

Si bien tomó algún tiempo comprender el modelo, el diseño es realmente limpio y prácticamente decidimos usarlo en todos los lugares donde necesitamos DnD. Entonces, muy útil.

¿Con qué frecuencia tiene problemas con él y qué tan frustrantes son?

Hasta ahora hemos tenido 2 problemas:

• obtener la experiencia de usuario de arrastre correcta con el backend táctil (incluido el rendimiento)
• Inicialmente, intenté implementar la lógica del área de colocación en JS, pero me quedé atascado al no poder obtener las coordenadas correctas relativas al objetivo (para determinar si caer por encima o por debajo del objetivo) de React DnD, finalmente decidí crear elementos DOM superpuestos separados como objetivos de colocación.

¿Qué características te interesan?

Rendimiento, ocultando las peculiaridades de los navegadores/plataformas subyacentes.

¿Puedes adjuntar un par de capturas de pantalla de tu producto?

Teletransporte Zen:

reaccionar-dnd-treeview:

¿En qué productos está utilizando React DnD?
Discord - https://discordapp.com - Un chat de voz y texto para jugadores

¿Qué tan útil lo encuentras?
¡Muy!

¿Con qué frecuencia tiene problemas con él y qué tan frustrantes son?
Con poca frecuencia, 5/10 frustrante.

¿Qué características te interesan?
Toda la funcionalidad actual.

Casi usamos react-dnd para el cliente de escritorio de Slack , pero desafortunadamente nos encontramos con dos limitaciones que resultaron ser un factor decisivo:

1. No es posible personalizar la lógica de arrastre (es decir, la lógica que calcula el estado de arrastre, como cuando se está arrastrando).
   
   
   
   • Es muy fácil cambiar los componentes en respuesta a los accesorios cambiantes inyectados desde el estado de arrastre. También es bastante sencillo personalizar la vista previa de arrastre con un componente React personalizado. Pero desafortunadamente, los datos que adjuntas a la operación de arrastre solo pueden adjuntarse y seguir el cursor. Esto impide una experiencia de usuario como la que tenemos actualmente con nuestra barra lateral, donde puede arrastrar los íconos del equipo para reordenarlos, y esos arrastres están restringidos solo al eje y. Con react-dnd, puede restringir fácilmente una vista previa de arrastre a un eje, pero es imposible restringir los datos adjuntos al cursor mientras arrastra. Esto significa que si aleja el cursor de la barra lateral horizontalmente, pero el cursor todavía está verticalmente "sobre" un destino de colocación, react-dnd no permitirá que el destino de colocación responda en absoluto. (ver GIF a continuación para ver el comportamiento que tenemos actualmente sin react-dnd 👇)
     
     
   
   
2. El uso de una capa de arrastre personalizada bloquea el bucle de procesamiento de React normal si está haciendo cosas en hover . Dado que debe crear un componente React adicional si desea una capa de arrastre personalizada, y esa capa de arrastre funciona cambiando su posición en respuesta a los cambios de props de los monitores dnd, render() termina obteniendo llamado _mucho_. Esto es solo un problema si planea volver a renderizar cualquier otro componente (probablemente otros objetivos de colocación) en hover mientras arrastra su DragSource. Conseguimos mitigar esto un poco cambiando el estado en hover forma asincrónica y regresando temprano al pasar el mouse si el objetivo de colocación no había cambiado, pero aún había un retraso notable al cambiar los objetivos de colocación mientras se desplazaba.

¡Espero que los comentarios sean útiles! Disfruté trabajando con react-dnd mientras buscaba la posibilidad de usarlo en la aplicación Slack, y me encantaría ver que supere estas limitaciones si es posible.

¿En qué productos está utilizando React DnD?

Lo usamos en tylio , una nueva forma de crear páginas web. React-dnd está al frente y al centro de la página donde carga su contenido.

¿Qué tan útil lo encuentras?

Muy útil; Es un poco difícil entenderlo al principio, ya que necesita comprender todas las partes móviles a la vez, pero una vez que hace clic, está listo para comenzar.

¿Con qué frecuencia tiene problemas con él y qué tan frustrantes son?

Nuestro caso es bastante complejo, ya que estamos reordenando y moviendo artículos de diferentes tamaños, y no queremos que cambien de lugar. Tuve algunos problemas con él, pero supongo que se trataba más de cómo usarlo que de la biblioteca en sí.

¿Qué características te interesan?

¡Casi todos! Utilizamos diferentes tipos de fuentes de arrastre y destinos de colocación, archivos/URL/texto nativos, HTML5 y backend táctil con capa de arrastre personalizada.

¿Puedes adjuntar un par de capturas de pantalla de tu producto?

Si alguien lo usa con Typescript, ¿podría proporcionar un ejemplo básico? Me quedé con este error:

decorateHandler.js:13 Uncaught TypeError: Cannot call a class as a function

Yo lo uso de esta manera:

@DragSource(ItemTypes.IDEA,ideaSource,(connect:DragSourceConnector, monitor: DragSourceMonitor)=>{ return { connectDragSource:connect.dragSource(), isDragging:monitor.isDragging() }; })(Idea) export class Idea extends React.Component<IIdeaProps,{}>{...}

No sé si es demasiado tarde para intervenir, pero quería dar algunos comentarios (con suerte, constructivos).

Descubrí que React-DnD es algo difícil de comprender (e implementar). Tiene muchas partes móviles y la configuración es bastante complicada. Esperaba tener algo que fuera más "plug-n-play". Y tal vez esto se deba a que intenta ser muchas cosas diferentes (objetivos de arrastrar y soltar, reordenar listas, etc.). Pero terminé adoptando un enfoque diferente, que básicamente consistía en poner botones arriba/abajo en cada elemento y reordenarlos de esa manera, combinado con reaccionar-voltear-mover para animar el movimiento.

Me encantaría ver una bifurcación de esto que se centre únicamente en el reordenamiento de la lista y que sea _súper_ simple para que funcione.

Estamos comenzando a usarlo en un producto patentado a gran escala que se crea con React y Redux. Usamos react-dnd para administrar los aspectos de arrastrar y soltar de todas las cosas, excepto los elementos SVG en la aplicación. Tiene la capa de abstracción adecuada. De hecho, tenemos algo muy similar interno para el código anterior a React y está respaldado por eventos del mouse.

Lo único que deseo que tenga react-dnd es un backend basado en eventos del mouse, por lo que también funciona para elementos SVG.

Por cierto, estoy en el proceso de escribir una definición de tipo de flujo basada en su definición de TypeScript , ya que la existente en tipo de flujo está incompleta.

¡Vaya, muchos aportes! ¡Estos son muchos datos para revisar! Voy a cerrar este tema. ¡Gracias a todos por tomarse el tiempo para enviar comentarios!

Planeo actualizar parte de la documentación en las próximas semanas, y una de mis ideas es crear un escaparate para proyectos y aplicaciones usando React DND. ¡Crearé un problema de seguimiento para capturar esos proyectos cuando esté listo para asumir el proyecto!

💜

@mnquintana Comentarios muy interesantes: ¿usted y el equipo terminaron usando otra biblioteca de arrastrar y soltar o simplemente crearon algo completamente desde cero?

@mnquintana sería realmente increíble para aprender lo que hizo para superar esto, o mejor aún, ¡haga que Slack publique su biblioteca dnd!

@epelz Necesito tu ayuda. ¿Ha creado un componente reutilizable de arrastrar y soltar para arrastrar las tarjetas en el tablero y los elementos en la lista o usar un componente separado para las tarjetas y la lista? Realmente apreciaría si usted puede responder.

Sé que este es un hilo de discusión bastante antiguo, pero quería contribuir de todos modos. Evernote
🐘 ¡usa react-dnd ahora mismo para nuestro nuevo producto Spaces para empresas! Hemos aprendido mucho y podríamos tratar de compartir lo que hemos aprendido si la gente está interesada :)

¿En qué productos está utilizando React DnD?
https://evernote.com/negocios

¿Qué tan útil lo encuentras?
¡Muy útil! Fue una curva de aprendizaje empinada, pero conseguimos que hiciera la mayor parte de lo que queríamos hacer.

¿Con qué frecuencia tiene problemas con él y qué tan frustrantes son?
Siento que hay grandes barreras para los principiantes y algunas cosas son interesantes de manejar. Algunos errores relacionados con los efectos de desplazamiento y colocación nos confundieron bastante, pero al analizarlos más a fondo, parece que algunos de ellos son solo limitaciones con la implementación nativa de arrastrar/soltar de HTML5 (los efectos de colocación parecen anular específicamente el cursor que desea aplicar para que podamos No aproveche cosas como cursor: no-drop Es realmente inteligente que lo haya hecho para que pueda implementar sus propios backends si es necesario y aún no nos hemos aventurado a experimentar con el backend táctil.

Tuvimos un momento interesante conectando los permisos. Nuestro arrastrar y soltar para notas requiere muchas cosas para saber si podemos mover y/o soltar algo. También descubrimos que teníamos que volver a implementar el desvanecimiento nativo y arrastrar hacia atrás al elemento DOM principal cuando no encontraba un lugar para colocarnos en nuestro CustomDragLayer (este podría ser un ejemplo con el que podemos contribuir).

¿Qué características te interesan?
Estamos buscando implementar múltiples arrastrar y soltar y no parece que haya una forma limpia de hacerlo con React-Dnd por lo que sabemos. Sin embargo, lo estamos investigando más. Cuando profundicemos, compartiremos más.

@augbog no estoy seguro de si lo ha probado, pero ¿ha analizado la implementación de Gaeron en la primera publicación del número 14 y ha utilizado una capa de arrastre personalizada?

En cierto modo, este escenario ya es posible: los consumidores pueden realizar un seguimiento manual de los elementos seleccionados, configurar dragPreview en algún tipo de imagen genérica de marcador de posición y reaccionar de manera adecuada a la eliminación de varios elementos (en lo que respecta a la lógica empresarial).

https://react-dnd.github.io/react-dnd/examples-drag-around-custom-drag-layer.html

Gracias @JM-Mendez, sí, vimos eso y nos preocupaba el comentario de seguimiento sobre tener múltiples componentes conscientes de que estaban siendo arrastrados, pero después de volver a leerlo, en realidad puede no afectarnos, así que todavía lo estamos investigando :) Gracias. por la llamada en eso!

Todavía no hay backend para cross iframe DnD o la ventana principal para la capacidad de arrastre del iframe secundario. @gaearon Vi su comentario sobre este problema en algunos hilos, me gustaría decir que esta es la única razón por la que tuve que usar la solución js pura para mi proyecto.

(Editar) Creo que esta es una función realmente útil para cualquiera que intente crear un generador de páginas de arrastrar y soltar.