Agrega Drag & Drop al sitio web fácilmente con Dragula
Buscando una biblioteca gratuita para manejar las funciones de arrastrar y soltar? Entonces Dragula es el único recurso que necesitarás.
Este script gratuito te permite Agrega características de arrastrar y soltar para cualquier elemento de tu página. Esto incluye soporte para los marcos React y AngularJS, junto con JavaScript de vainilla.
Dragula es super fácil de configurar y viene con Un montón de activadores personalizados para los comportamientos de los usuarios.. Esto significa que puede activar sus propias funciones después de que el usuario arrastre un elemento, haga clic en un elemento o reorganice cualquier parte de la página..
Si echas un vistazo a la demostración en vivo encontrarás algunos fragmentos de código, junto con muestras utilizables.
La configuración de Dragula Solo requiere un único archivo JavaScript para que funcione. Aunque, las opciones extra pueden ser un poco confusas..
Por ejemplo, digamos que tienes dos contenedores., #izquierda y #Correcto, que desea soportar elementos que se pueden arrastrar. Necesitarás añadir manualmente estos contenedores a la función Dragula para soportar los métodos de arrastrar y soltar.
Si no tiene un conocimiento sólido de los fundamentos del desarrollo de aplicaciones para usuario, entonces tendrá problemas para usar Dragula. Pero, el repositorio de GitHub tiene un montón de grandes ejemplos que puede seguir junto con e incluso fragmentos de código que puede copiar.
Aquí hay una muestra de los documentos de GitHub para saber cómo apuntar a los dos contenedores (izquierdo y derecho):
dragula ([document.querySelector ('# left'), document.querySelector ('# right')]); Tenga en cuenta que si busca más en la página de GitHub, encontrará una enorme lista de opciones puedes pasar a esta función.
Tu puedes elegir si copiar o mover elementos, qué contenedor (s) soportan los elementos arrastrados e incluso funciones de devolución de llamada que funcionan a través de diferentes comportamientos del usuario como:
- Flotando sobre un contenedor
- Evento inicial de clic y arrastre
- Evento de caída
- Dejar caer un elemento fuera de límites
- Clonando un elemento / contenedor arrastrando
Esta biblioteca tomará un trabajo inicial pero si estás familiarizado con JavaScript debería ser una obviedad.
Mira la página de demostración para ver como funciona y para obtener algunas ideas de ejemplo de código. Dragula es una biblioteca masiva y es probablemente el mejor script de código abierto para Maneja arrastrar y soltar, con la más amplia gama de personalización..
