El ejemplo de este artículo comparte con usted el código específico para realizar el efecto de arrastre del mouse en JavaScript para su referencia. El contenido específico es el siguiente
.
Creo que la dificultad de este experimento es mantener sin cambios la posición relativa del cuadro y el mouse. ¿Cómo lograr el efecto de arrastre presionando y moviendo el mouse
?
Necesitamos usar tres funciones: onmousedown , onmousemove y onmouseup , que representan respectivamente presionar el mouse, mover el mouse y levantar el mouse.
En la función de devolución de llamada de presionar el mouse , necesitamos obtener la posición inicial del mouse a través de clientX y clientY . y a través de offsetLeft y offsetTop obtiene la posición inicial del cuadro, y luego calcula la diferencia entre la posición inicial del mouse y la posición inicial del cuadro
en la función de devolución de llamada del movimiento del mouse , necesitamos obtener la posición actual de; el cuadro basado en la diferencia entre la posición del mouse y la posición previamente calculada, y luego cambie sus valores izquierdo y superior, no olvide establecer la posición en absoluta (porque lo olvidé...)
En la función de devolución de llamada del elevación del mouse , necesitamos borrar el movimiento del mouse y la elevación del mouse, configurando onmousemove y onmouseup en null ¡También
preste atención! ! !
Tanto la función de movimiento del mouse como la función de elevación del mouse deben escribirse en la función de presionar el mouse, porque necesitamos diseñar el comportamiento posterior después de la acción de presionar el mouse, y un punto muy importante es:
la función de presionar el mouse es p, y el mouse Mover y levantar el mouse están en el documento
porque no queremos decir que el mouse se mueve en p, sino que mueve toda la página.
Los puntos clave probablemente sean estos:
<!DOCTYPE html>.
<html>
<cabeza>
<meta juego de caracteres="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta nombre="viewport" content="ancho=ancho-dispositivo, escala-inicial=1.0">
<título>Documento</título>
<estilo>
#caja{
ancho: 100px;
altura: 100 píxeles;
color de fondo: aguamarina;
radio del borde: 14px;
sombra de cuadro: 2px 2px 6px rgba(0,0,0,.3);
/* Los buenos quieren moverse y cambiar a la izquierda sin establecer el posicionamiento. . . */
posición: absoluta;
}
</estilo>
</cabeza>
<cuerpo>
<div id="caja"></div>
<guión>
let box=document.getElementById("cuadro");
box.onmousedown=función(evento){
let disx=event.clientX-box.offsetLeft;
let disy=event.clientY-box.offsetTop;
//Esto no es box.onmousemove, sino document.onmousemove
document.onmousemove=función(evento){
box.style.left=event.clientX-disx+'px';
box.style.top=event.clientY-disy+'px';
}
//Para escribir en omniusedown document.onmouseup=function(){
//Ambos deben establecerse en nulo
document.onmousemove=null;
documento.onmouseup=null;
devolver falso;
}
}
</script>
</cuerpo>
</html> Recomendaciones relacionadas: [Video tutorial de JavaScript]
Lo anterior es el contenido detallado de js para simular eventos de arrastre del mouse (con ejemplos de imágenes y textos). Para obtener más información, preste atención a otros artículos relacionados en el sitio web chino de PHP. !
