Librerias Javascript

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.

post-title

Directorios y ficheros

  • public
    • css
      • style.css
    • js
      • ejemplo_uno.js
      • ejemplo_dos.js
      • ejemplo_tres.js
  • ejemplo_uno.html
  • ejemplo_dos.html
  • ejemplo_tres.html

Código fuente

index.php
Copiar Copiar
                
  /* 

  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.

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. Con Draggabilly se pueden crear interfaces de usuario más interactivas y dinámicas, lo que mejorará significativamente la experiencia del usuario. Desde organizar elementos en una página hasta permitir a los usuarios redimensionar componentes de forma intuitiva. También mencionar que los resultados creados son es mobile-friendly, lo que significa que funcionará sin problemas en dispositivos móviles, garantizando una experiencia óptima para usuarios que acceden a la aplicación desde un teléfono o una tablet.

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.

<script src=" https:// cdnjs.cloudflare.com/ajax/libs/draggabilly/3.0.0/ draggabilly.pkgd.min.js "></script>

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

También podemos crear nuevos elementos simplemente cambiando el nombre, por ejemplo: let draggieDos = new Draggabilly('.draggable-2');

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()

También Podemos hacer que se arrastre únicamente si lo hacemos desde un elemento más pequeño dentro del objeto, como si de un asa se tratase. Lo hacemos con: handle: element.querySelector('.handle')

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.

Codepen Ver en Codepen
Copiar Descargar
Suscríbete

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.

#1
Jacinto Verdaguer Mensaje nuevo

25 de septiembre de 2023

Me parece muy bien

Todo lo que describes esta bastante contrastado?

Marga Prohens Mensaje nuevo

25 de septiembre de 2023

Buena idea

Esta bien lo que escribes

#3
José Sacristán Mensaje nuevo

26 de septiembre de 2023

Me gusta mucho el contenido

Esta bastante bien

#4
Aleix Aparicio Mensaje nuevo

26 de septiembre de 2023

Está muy bien todo

Esta bastante bien

#5
Juan de la Cierva Mensaje nuevo

26 de septiembre de 2023

Hola mundo

Este es el comentario numero 2

#6
José Sacristán Mensaje nuevo

26 de septiembre de 2023

Reunión de equipo 3

qwew

#7
Ale Mensaje nuevo

1 de enero de 2024

Prueba

Esto es una prueba móvil...

Deja un comentario
Top