Hoy resolveremos algunos problemas en el prototipo del último arrastre. Veamos cuáles son los problemas.
Adjunto el código JavaScript del tema anterior para facilitar a todos que vean el problema.
<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; disx = oevent.clientx - odiv.offsetleft; disy = oevent.clienty - odiv.offsettop; odiv.onmouseMove = function (ev) {var oevent = ev || evento; odiv.style.left = oevent.clientx - disx+'px'; odiv.style.top = oevent.clienty - disy+'px'; }; odiv.onmouseUp = function () {odiv.onmouseMove = null; odiv.onmouseup = null; }; }; }; </script>1. Si mi mouse se mueve más rápido ahora, encontrará que el mouse sale de este Div, y el DIV no seguirá al mouse en este momento.
Entonces, ¿por qué ocurre este problema?
La razón es en realidad muy simple. Agregamos el evento MouseMove al Div, por lo que una vez que el mouse se desvía del Div, MouseMove ya no se activará en este momento.
Solución: El evento se carga en el documento, porque su mouse todavía está en la página sin importar qué, MouseMove se activará sin importar qué, por lo que será rápido.
Luego modificamos el código en consecuencia.
<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; disx = oevent.clientx - odiv.offsetleft; disy = oevent.clienty - odiv.offsettop; // en el documento de carga del evento.onmouseMove = function (ev) {var oevent = ev || evento; odiv.style.left = oevent.clientx - disx+'px'; odiv.style.top = oevent.clienty - disy+'px'; }; odiv.onmouseup = function () {document.onmouseMove = null; odiv.onmouseup = null; }; }; }; </script>Entonces este problema se puede resolver.
2. Veamos qué problemas todavía hay. Aunque el problema de arrastrar rápidamente se resolvió, cuando moví el mouse a esta posición
Ahora puedes ver claramente que el mouse no está en el div. Si levanta el mouse en este momento, puede ver que se moverá después de regresar. ¡Este es otro error!
De hecho, esta pregunta es la misma que la anterior. Por lo tanto, es muy simple de resolver, agregemos el mouseup al documento, probemos
document.onmouseUp = function () {document.onmouseMove = null; document.onmouseUp = null; };De esta manera, si te mueves a la posición, justo ahora, no habrá un error anterior, y no habrá ningún problema para moverse rápidamente. Todo es normal.
3. Echemos un vistazo a los problemas de compatibilidad del navegador
De hecho, hay tal problema en la versión inferior del navegador Firefox
. ¿Cómo ha ocurrido? Cuando arrastra la primera vez, es correcta. Cuando lo arrastra una vez, presione y manténgalo y muévalo, encontrará que habrá una sombra detrás de él. ¿Qué está pasando con esto?
De hecho, el Firefox que estamos arrastrando ahora es BUGGY. Entonces, ¿qué pasa si agregamos algo de contenido al Div?
Encontrará que ahora no hay problema.
Entonces el insecto de Firefox solo aparece en el Div vacío.
Solución:
De hecho, es muy simple. Solo necesitamos bloquear el evento predeterminado del navegador y devolver falso; en onmousedown. ¿Por qué agregarlo a Onmousedown?
¿Puedes pensar en qué evento comienza el arrastre? Comienza con Onmousedown. Cuando se presiona el mouse, se inicia el arrastre. Por lo tanto, debe cargar onmousedown.
De hecho, acaba de agregar una devolución de oración falsa; bloqueó el insecto de Firefox.
De esta manera, no importa cómo se demore, no habrá problema.
Código adjunto:
<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; disx = oevent.clientx - odiv.offsetleft; disy = oevent.clienty - odiv.offsettop; // en el documento de carga del evento.onmouseMove = function (ev) {var oevent = ev || evento; odiv.style.left = oevent.clientx - disx+'px'; odiv.style.top = oevent.clienty - disy+'px'; }; document.onmouseUp = function () {document.onmouseMove = null; document.onmouseUp = null; }; devolver falso; }; }; </script>El programa ahora está completo, pero todavía hay algunos problemas con la experiencia del usuario.
Por ejemplo, si un usuario puede arrastrar este DIV fuera del navegador, ¿cómo puede resolverlo?
Entonces estamos agregando un juicio. Esto es muy simple, si sales de la izquierda
, que es directamente igual a 0, y no puede salir de la izquierda. Entonces lo mismo es verdadero arriba.
Entonces, ¿cómo podemos evitar que salgan de la derecha? ? Simplemente dibuja una imagen y deja claro. De hecho, podemos calcularlo restando el ancho visual de la página de la div.
Entonces este es el llamado valor máximo. Simplemente juzgue si la distancia movida excede este valor máximo, es igual a este valor máximo. Entonces lo siguiente es lo mismo.
Adjunte el código completo:
<script type = "text/javaScript"> // arrastre y suelta la div. La versión baja de Firefox tiene ventana de error. var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || evento; disx = oevent.clientx - odiv.offsetleft; disy = oevent.clienty - odiv.offsettop; document.onmouseMove = function (ev) {var oevent = ev || evento; // Almacene la ubicación actual del div var odivleft = oevent.clientx - disx; var odivTop = oevent.clienty - disy; // arrastre desde la izquierda if (Odivleft <0) {odivleft = 0; } else if (odivleft> document.documentelement.clientwidth - odiv.offsetwidth) {odivleft = document.documentelement.clientwidth - odiv.offsetwidth; } if (OdivTop <0) {odIVTop = 0; } else if (odivtop> document.documentelement.clientheight - odiv.offsetheight) {odivTop = document.documentelement.clientheight - odiv.offsetheight; } odiv.style.left = odivleft + 'px'; odiv.style.top = odivTop + 'px'; }; document.onmouseUp = function () {document.onmouseMove = null; document.onmouseUp = null; }; devolver falso; // Bloquear el evento predeterminado y resolver el error Firefox}; }; </script>Entonces el arrastre está más completo ahora. O (∩_∩) o