¿Cómo implementar la funcionalidad de arrastrar y soltar en JavaScript?
Hay muchas formas de implementar la funcionalidad de arrastrar y soltar. El siguiente es un método de implementación basado en JavaScript local. Crearemos un elemento que se puede arrastrar, implementaremos un comportamiento de arrastrar y soltar a través de detectores de eventos y actualizaremos la posición del elemento durante el proceso de arrastrar y soltar.
Crear un elemento arrastrable:
lt;!DOCTYPE htmlgt;?
lt;htmlgt;?
lt;headgt;?
lt;meta charset="UTF-8"gt;?
lt;meta name="viewport" content="ancho=ancho del dispositivo, escala inicial=1.0"gt;?
lt;titlegt; Arrastrar y soltar ejemplolt;/titlegt;?
lt; stylegt;?
#draggable {?
ancho: 100px;?
alto: 100px;?
color de fondo: rojo;?
cursor: mover;?
posición: absoluta;?
izquierda: 0;?
arriba: 0;?
}?
lt;/stylegt;?
lt;/headgt;?
lt;bodygt;?
lt;div id="draggable"gt;lt;/divgt;?
lt;scriptgt;
// Obtener ¿Elementos arrastrables?
const draggable = document.getElementById('draggable');?
// ¿Definir un objeto para almacenar la posición de un elemento cuando el mouse está flotando?
let posiciónactual = {?
x: 0,?
y: 0?
};?
// ¿Definir una función que actualice la posición de un elemento?
función updatePosition(evento) {?
draggable.style.left = `${event.clientX - currentPosition.x}px`;?
arrastrable .style.top = `${event.clientY - currentPosition.y}px`;?
}?
// Agregar detectores de eventos al presionar, mover y soltar el mouse al elemento ¿dispositivo?
draggable.addEventListener('mousedown', (evento) =gt; {?
currentPosition = {?
x： event.clientX, ?
y： event.clientY?
};?
document.addEventListener('mousemove', updatePosition);?
document.addEventListener ('mouseup', () =gt; {?
document.removeEventListener('mousemove', updatePosition);?
}});?
});
lt;/scriptgt;
lt;/bodygt;?
lt;/htmlgt;
Esto muestra
El ejemplo iniciará la función de arrastrar y soltar cuando se presione el mouse. A medida que se mueve el mouse, la posición del elemento se actualiza en función de qué tan lejos se ha movido el mouse. Cuando suelta el mouse, el comportamiento de arrastrar y soltar se detiene.
El código completo es el siguiente: