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.
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.
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.
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
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
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.
<div class="contenedor">
<div class="draggable">Arrástrame</div>
</div>
.contenedor {
width: 100%;
height: 400px;
border: 2px dashed #ccc;
position: relative;
}
.draggable, .dragable-dos {
width: 100px;
height: 100px;
background-color: green;
color: #fff;
text-align: center;
line-height: 100px;
position: absolute;
cursor: grab;
}
.dragable-dos {
background-color: red;
}
.draggable:active, .draggable-dos:active {
cursor: grabbing;
}
<div class="contenedor">
<div class="draggable">
<p>Arrástrame</p>
</div>
<div class="draggable-dos">
<p>Elemento 2</p>
</div>
</div>
let draggie = new Draggabilly('.draggable');
const contenedor = document.querySelector('.contenedor');
const draggable = document.querySelector('.draggable');
const draggableDos = document.querySelector('.draggable-dos');
const draggie = new Draggabilly(draggable, {
containment: contenedor,
axis: 'x',
});
const draggie_dos = new Draggabilly(draggableDos, {
containment: true,
});
draggie_dos.setPosition( 260, 25 );
const contenedor = document.querySelector('.contenedor');
const draggable = document.querySelector('.draggable');
const draggableDos = document.querySelector('.draggable-dos');
const toggleButton = document.getElementById('toggleDraggable');
const draggie = new Draggabilly(draggable, {
containment: contenedor,
grid: [ 50, 50 ],
disabled: true,
});
const draggie_dos = new Draggabilly(draggableDos, {
containment: true,
handle: '.handle',
});
draggie_dos.setPosition(260, 25);
let isDraggableEnabled = false;
toggleButton.addEventListener('click', () => {
isDraggableEnabled = !isDraggableEnabled;
if (isDraggableEnabled) {
draggie.enable();
toggleButton.textContent = 'Arrastrar Habilitado';
} else {
draggie.disable();
toggleButton.textContent = 'Arrastrar Inhabilitado';
}
});
<div class="contenedor">
<div class="draggable">Arrástrame</div>
<div class="draggable-dos">
<div class="handle">Asa</div>
</div>
</div>
<button id="toggleDraggable">Arrastrar Habilitado</button>
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet ut ligula et semper. Aenean consectetur, est id gravida venenatis.
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