Estoy un poco feliz hoy. El blog CSDN tiene más de 10,000 visitas. Nunca he tenido un número tan alto de puntos de vista en el pasado. Tengo que decir que todavía soy un poco pretencioso con demasiada frecuencia, pero aún no puedo evitar ser feliz cuando veo este aliento. Al menos, esto me hace sentir como una persona en la industria. No estoy solo.
Sin más preámbulos, continúe la grabación de hoy, grabe las marcas de arrastre de repetición y analice el proceso:
1. Para repetir las marcas de arrastre, primero debe grabarlas;
2. Para grabar trazas de arrastre, se debe implementar el arrastre;
Este problema se hizo hace unos días, y era ligeramente defectuoso en ese momento, pero el método de implementación general era claro, por lo que hoy me di cuenta de este problema mucho más rápido. Estaba muy feliz. Después de darme cuenta nuevamente hoy, lo entendí un poco más profundo, así que lo grabaré hoy;
En cuanto a la grabación de trazas de arrastre, este análisis será corto, después de todo, lo he hecho una vez:
1. Determine la posición y el estado actuales del DIV para garantizar que el absoluto pueda usarse para arrastrar;
2. Escuche los eventos de arrastre del mouse (varios eventos del mouse resumidos ayer);
3. Haga una respuesta correspondiente basada en el evento del mouse correspondiente y registre los puntos en los que el DIV existe en el Drag y la caída de OnmouseMove;
4. Escuche el evento de rebote del mouse para finalizar el evento de arrastre y el registro de puntos
De todos modos, implementemos primero el siguiente código (todos los códigos se enumeran aquí al mismo tiempo y analizan uno por uno más tarde):
lenguaje html:
<div id = "showzone"> </div> // Esto sigue siendo tan familiar <a href = "#" style = "Posición: Absolute; Margin-top: 100px; color: amarillo; fondo de fondo: rojo;"> ReBackeBeback </a> // Esto se reproduce de nuevo y adelante
Parte de JavaScript:
Window.Onload = function () {var obj = document.getElementById ("showzone"); var disx = disy = 0; var dragif = false; Var Position = [{x: obj.offsetleft, y: obj.offsettop}]; // Esta es la clave para implementar la grabación y la reproducción, y los otros están obteniendo elementos básicos var oa = document.getElementsBytagName ("a") [0]; obj.onMousEdown = function (event) {var event = event || window.event; disx = event.clientx-oBj.offsetleft; // La distancia del mouse al borde div disy = event.clienty-obj.offsettop; dragif = true; // the flag position.push ({x: obj.offsetleft, y: obj.offsettop}); // El registro comienza desde este tiempo return false; }; document.OnMouseMove = function (event) {if (! dragif) return; // Este juicio es extremadamente importante, solo el movimiento presionado puede ser válido var event = event || window.event; var Nowx = Event.clientx-Disx; // Según la distancia del mouse registrado anteriormente en el DIV, puede conocer la distancia del DIV a la página web var Nowy = Event.clienty-Disy; var maxx = document.documentelement.clientwidth-obj.offsetwidth; // Esto es offsetWidth, que es el ancho del DIV, no offsetSetleft var maxy = document.documentelement.clientHeight-obj.offsetheight; Nowx = Nowx <0? 0: Nowx; // Estos juicios son solo para juzgar que no hay límite Nowy = Nowy <0? 0: Nowy; Nowx = Nowx> maxx? Maxx: Nowx; nowy = nowy> maxy? maxy: nowy; obj.style.margintop = obj.Style.Marginleft = 0; obj.style.left = nowx+"px"; // no olvides+"px", solo style.left/top es obj.style.style.top = nowy+"px" con "px"; posicion.push ({x: nowx, y: nowy}); // registrar obj.innerhtml = "x:"+nowx+"y:"+nowy; // ver los cambios intuitivamente return false; }; document.onmouseUp = function () {dragif = false; // drag y registra obj.innerhtml = "x:"+obj.offsetleft+"y:"+obj.offsettop; }; oa.onclick = function () {if (posicion.length == 1) return; // Cuando solo hay uno, significa que el temporizador VAR no se mueve. = setInterval (function () {var opos = posicion.pop (); opos? (obj.style.left = opos.x + "px", obj.style.top = opos.y + "px"): clearinterval (temporizador); // otro asombrado por esta escritura}, 30); devolver falso; }; };Algunos puntos clave para prestar atención a:
1. Matriz de posición VAR, conjunto de puntos: este punto es el punto de mudanza en la esquina superior izquierda del div, es decir, la trayectoria de movimiento que registramos es en realidad el conjunto de puntos en la esquina superior izquierda del DIV, Offsetleft es la coordenada X, Offsettop es la coordenada y, usted sabe dibujar este eje coordinado;
2. Varias longitudes o distancias que aparecen en el programa: OffsetLeft, ClientX, OffsetWidth, Style.Left, Document.DocumentElement.ClientWidth, etc.;
3. Método Push (): Agregue elementos al final de la matriz, cambie la longitud de la matriz y finalice;
4. Método Pop (): Elimine y devuelva el último elemento de la matriz. Hay dos puntos clave, uno: devolver el último elemento; el otro: eliminar el elemento y la longitud de la matriz se vuelve más pequeña;
De esta manera, nos hemos realizado la reproducción atrasada, por lo que no es necesario mencionar el principio de implementación. Si tenemos reproducción directa, ¿deberíamos obtener y eliminar el primer valor de la matriz? Jaja, trata de escribirlo y leerlo.
Tengo que decir que es más cómodo arrastrar con el mouse. Es demasiado inconveniente para mover el teclado. Puedes arrastrar y arrastrar con el mouse sin escrupulosamente ... el cielo ya está aturdido y va a estar caliente, pero hoy está bien ...