Arrastrar y soltar (drag & drop) con la libreria Javascript Draggabilly
En esta entrada voy a trabajar con la libreria Javascript Draggabilly. Esta herramienta permite implementar fácilmente funcionalidades de arrastrar y soltar en un proyecto web.
/*
Los directorios y ficheros son los que se utilizan en el
código de Ejemplo.
Haz clic sobre los ficheros para ver el código.
*/
El desarrollo web se centra en la creación de experiencias de usuario intuitivas, y una caracterÃstica que potencia la interacción es el arrastrar y soltar (Drag and Drop). Desde reorganizar listas hasta construir herramientas de diseño, el arrastrar y soltar brinda un alto nivel de interactividad que hace que las aplicaciones se vuelvan dinámicas y atractivas para los usuarios.
Comienzaremos creando un elemento básico que podremos arrastrar libremente por la pantalla. A medida que avancemos, lo haremos aún más interactivo y dinámico.
Cargamos la librerÃa desde el servicio de red de distribución de contenido, CDNJS.
O desde la ubicación de los ficheros del proyecto
<script src="public/js/draggabilly.pkgd.min.js"></script>
Creamos una instancia de Draggabilly y la asignamos a la variable draggie. let draggie = new Draggabilly('.draggable');
Creamos el elemento y el contenedor HTML, asà como los estilos en CSS.
Arrástrame
Ejemplo 1
Fácil, no? TodavÃa falta afinar un poco ya que asà como lo tenemos apenas permite el control del elemento, ahora se sale del contenedor y tapa otros elementos.
Delimitarememos donde podemos arrastrar el elemento con la instrucción: containment: true o la misma instrucción poniendo el nombre del elemento contenedor: containment: contenedor
Podemos asignar una posicion inicial con: draggieDos.setPosition( 260, 25 );
O controlar en que dirección se permite el arrastre axis: 'y', verticalmente axis: 'x', o para permitir recorrer horizontalmente
Arrástrame
Elemento 2
Ejemplo 2
Otra de las opciones es que podemos asignar al elemento es controlar cuando es arrastrable y cuando no con la opción draggie.disable() o volver a poder ser arrastable con draggie.enable()
Si lo que queremos es que el desplazamiento lo haga como si enciam de una cuadrÃcula se tratase lo hacemos con la siguiente opción: grid: [ x, y ] Siendo x el desplazamiento horizontal e y el vertical
Arrástrame
Asa
Ejemplo 3
Hasta aquà la primera entrega de esta librerÃa de arrastrar y soltar, Draggabilly. En esta entrada, hemos explorado cómo crear instancias de Draggabilly, configurar opciones como el eje de arrastre, la cuadrÃcula, mantenerlo dentro de un contenedor y deshabilitar o volver a habilitar mediante un botón.
En una próxima entrada, exploraremos más caracterÃsticas y posibilidades de Draggabilly, incluidos los eventos y cómo puedes utilizarlo para crear experiencias de usuario altamente interactivas y amigables.
Recibe las últimas noticias y actulaizaciones en tu correo.
Tus comentarios y apoyos son mi mayor fuente de inspiración. Cada mensaje y gesto de aprecio que recibo me impulsa a trabajar con mayor entusiasmo y dedicación. Saber que el conenido que genero es interesante y repercute en la gente es la razón por la cual sigo creando con pasión y compromiso.
Jacinto Verdaguer Mensaje nuevo
25 de septiembre de 2023
Marga Prohens Mensaje nuevo
25 de septiembre de 2023
José Sacristán Mensaje nuevo
26 de septiembre de 2023
Aleix Aparicio Mensaje nuevo
26 de septiembre de 2023
Juan de la Cierva Mensaje nuevo
26 de septiembre de 2023
José Sacristán Mensaje nuevo
26 de septiembre de 2023
Ale Mensaje nuevo
1 de enero de 2024