El principio de arrastrar: de hecho, la distancia entre el mouse y la esquina superior izquierda permanece sin cambios. Veamos la imagen a continuación. Este punto rojo es el mouse.
Arrastre arrastre en realidad significa calcular la posición de un objeto a través de la posición del mouse. Es así de simple y tan voluntario. Entonces, ¿cómo encuentras esta distancia? ?
La diferencia entre la posición del mouse y la posición del objeto es esa distancia, ¿verdad? Entonces esta línea diagonal está compuesta de líneas horizontales y verticales.
Veamos cómo se realiza el programa.
<div id = "div1"> </div>
De hecho, lo que cambió fue la parte superior izquierda de un Div, y luego comenzó a moverse. En ese caso, debe haber una posición absoluta, ¿verdad?
<style type = "text/css"> #div1 {ancho: 200px; Altura: 200px; Antecedentes: rojo; Posición: Absoluto; } </style>Aquí hay algunos pasos: 1. Presione el mouse 2. Levante el mouse 3. Mueva el mouse
<script type = "text/javaScript"> window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || evento; // navegador compatible disx = oevent.clientx - odiv.offsetleft; // La posición horizontal es la posición del ratón: la posición del div disy = oevent.clienty - odiv.offsettop; }; odiv.onmouseMove = function (ev) {var oevent = ev || evento; odiv.style.left = oevent.clientx - disx+'px'; // Posición actual del mouse -disx odiv.style.top = oevent.clienty - disy+'px'; }; }; </script>Habla con la imagen:
var odivleft = oevent.clientx - disx; El diagrama es muy claro
MouseUp No echemos un vistazo a cuál es el efecto ahora. .
Encontrarás un fenómeno muy interesante. Si no presiono el mouse, me seguiré. ¿Por qué es esto? ? ?
Echemos un vistazo a MouseMove: nadie en JavaScript estipula que debe presionar el mouse antes de comenzar, ¿verdad? Independientemente de si presiona el mouse o no, este mouseve está sucediendo todo el tiempo, por lo que el problema viene de aquí. Antes de que se presione el mouse, no debe haber respuesta cuando el mouse se mueve sobre él. Tienes que presionarlo para reaccionar.
Por lo tanto, este mouseMove no debe agregarse tan pronto como se lance, pero debe esperar hasta que se presione el mouse y luego agregue mouseMove para ver el código modificado.
Por cierto, se agrega MouseUp, y su papel se refleja en este momento. La función es odiv.onmousemove = null; Eliminar el evento Move,
De lo contrario, cuando se levante el mouse, el objeto aún lo seguirá. odiv.onmouseup = null; Si no queda basura, será inútil levantar el mouse.
Echemos un vistazo al código modificado:
<script type = "text/javaScript"> window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || evento; // navegador compatible disx = oevent.clientx - odiv.offsetleft; // La posición horizontal es la posición del ratón: la posición del div disy = oevent.clienty - odiv.offsettop; odiv.onmouseMove = function (ev) {var oevent = ev || evento; odiv.style.left = oevent.clientx - disx+'px'; // Posición actual del mouse -disx odiv.style.top = oevent.clienty - disy+'px'; }; odiv.onmouseUp = function () {odiv.onmouseMove = null; odiv.onmouseup = null; // no queda basura, sería inútil levantar el mouse}; }; }; </script>Ahora hicimos un simple arrastre y caída, por supuesto, todavía hay algunos pequeños problemas para resolver.
Pero pase lo que pase, ya tenemos un prototipo de arrastre. Resolveremos algunos errores uno por uno en el próximo número.