Cómo hacer que los elementos se puedan arrastrar
Active el arrastre y gestione sus eventos.
Cómo hacer que los elementos se puedan arrastrar es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
La API de arrastrar y soltar de HTML
La API nativa de arrastrar y soltar permite a los usuarios tomar elementos y soltarlos en otro lugar. Está basada en eventos: los elementos de origen activan eventos de arrastre y los destinos de soltar activan los suyos. No se necesita ninguna biblioteca.
El atributo draggable
De forma predeterminada, solo los enlaces y las imágenes se pueden arrastrar. Añada draggable="true" para que cualquier elemento se pueda arrastrar.
<div draggable="true" id="card">Drag me</div>Establecer draggable en JS
Puede activar o desactivar este comportamiento desde un script mediante la propiedad draggable.
const card = document.getElementById("card");
card.draggable = true;El evento dragstart
dragstart se activa en el momento en que comienza un arrastre. Aquí es donde debe registrar qué elemento se está arrastrando.
card.addEventListener("dragstart", (e) => {
console.log("Started dragging", card.id);
});Transportar datos con dataTransfer
El evento expone dataTransfer. Utilice setData(format, value) en dragstart para adjuntar una carga útil que acompañe al arrastre.
card.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text/plain", card.id);
});El evento drag
drag se activa continuamente mientras se mueve el elemento. Utilícelo con moderación, ya que puede activarse muchas veces por segundo.
card.addEventListener("drag", (e) => {
// fires repeatedly during the drag
});El evento dragend
dragend se activa cuando el usuario suelta el elemento, independientemente de que la operación de soltar haya tenido éxito. Utilícelo para restablecer los estilos del elemento de origen.
card.addEventListener("dragend", (e) => {
card.classList.remove("dragging");
});Marcar el elemento de origen
Un patrón habitual consiste en añadir una clase en dragstart y eliminarla en dragend para atenuar o resaltar el elemento arrastrado.
card.addEventListener("dragstart", () => card.classList.add("dragging"));
card.addEventListener("dragend", () => card.classList.remove("dragging"));Efectos permitidos
Establezca effectAllowed en dragstart para declarar qué operaciones son válidas: "copy", "move", "link" o combinaciones de estas.
card.addEventListener("dragstart", (e) => {
e.dataTransfer.effectAllowed = "move";
});Limitación en dispositivos táctiles
La API nativa ofrece compatibilidad táctil limitada en dispositivos móviles. Para aplicaciones diseñadas principalmente para el uso táctil, considere Pointer Events o una biblioteca específica; la API nativa destaca en equipos de escritorio.
Desactivar la selección de texto
Al arrastrar, se puede seleccionar texto accidentalmente. Una pequeña regla de CSS permite realizar los arrastres sin interferencias.
/* CSS */
.draggable { user-select: none; }Comprobación rápida
Ponga a prueba los conceptos básicos de draggable.
Repaso: hacer que los elementos se puedan arrastrar
Ha activado el arrastre con draggable="true", ha gestionado dragstart/drag/dragend, ha asociado una carga útil mediante dataTransfer.setData, ha establecido effectAllowed y ha aplicado estilos al elemento de origen. A continuación: destinos de soltar.
Preguntas frecuentes
¿La lección «Cómo hacer que los elementos se puedan arrastrar» es gratis?
Sí — el texto completo de «Cómo hacer que los elementos se puedan arrastrar» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Cómo hacer que los elementos se puedan arrastrar»?
Active el arrastre y gestione sus eventos. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Cómo hacer que los elementos se puedan arrastrar»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Cómo hacer que los elementos se puedan arrastrar
- Destinos de soltado y dataTransfer
- Respuesta visual durante el arrastre
- Arrastre de archivos a la página