Veamos qué problemas ocurrirán cuando el arrastre anterior esté allí cuando algo a su alrededor. No habrá ningún problema en los navegadores avanzados. Vamos a probarlo en IE7 y saldrá el problema. Como se muestra
Podemos ver claramente que el texto ha sido seleccionado. Entonces esta experiencia de usuario es muy mala y no es conveniente de usar. Por cierto, agregamos una devolución falsa antes; nos ayudó a resolver muchos problemas. Si eliminamos esto, ocurrirá el mismo problema en Chrome. Entonces es decir, este retorno falso; puede resolver los problemas de los navegadores Chrome FF IE9+.
De hecho, en nuestro desarrollo, hay muchos elementos en la página, y es imposible tener solo un div. No se seleccionarán otros lugares cuando se arrastre, como el mapa de Baidu, puede jugar con él.
Entonces, ¿cómo hacemos tal arrastre? ¿Puede resolver el problema de IE7?
Solución:
Podemos usar un pequeño truco para resolverlo. Este truco solo se puede admitir en IE6-8, y en realidad puede resolver nuestro problema, porque otros navegadores usan return False; Veamos cuáles son los trucos
¡Es captura de eventos! ! Adjunte el código a la breve descripción
<title> </title> <script type = "text/javaScript"> window.onload = function () {var obtn = document.getElementById ("btn"); obtn.OnClick = function () {alerta (1); }; // Los eventos en todos los lugares en la página web se concentran en un botón, es decir, dedicado obtn.setCapture (); // Dondequiera que haga clic, establezca un} </script> </head> <body> <input type = "button" id = "btn" valor = "botón"/> </body>De hecho, los eventos en todos los lugares en la página se concentran en un punto, y aparece un clic al hacer clic en cualquier posición de la página, que es la función de SetCapture ().
¡Recoge todos los eventos a un botón para manejar! ! ¡Esto solo es compatible con IE! !
De esta manera, déjame ver cómo modificar el código anterior. . . .
Primero, cambiamos todos los documentos al Div. ¿Recuerdas que hemos dicho antes porque el mouse se arrastra más rápido, es fácil arrastrar el DIV, por lo que agregamos todos los eventos al documento.
Y ahora no hay necesidad de hacer esto, agregue un setcapture () a nuestro DIV anterior para ver el efecto.
<Body> se seleccionará el texto en IE 7. <Br /> Si no agrega retorno False Chrome FF, habrá tal problema asdsadad <br /> <div ‘" div1 "> asdsadad asdsadad asdsadad </div> asdSadadasdsadad </body>
<style type = "text/css"> #div1 {ancho: 200px; Altura: 200px; Antecedentes: rojo; Posición: Absoluto; } </style> <script type = "text/javaScript"> // arrastre y suelta la div. La versión baja de Firefox tiene WIND 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; var odivleft = oevent.clientx - disx; var odivTop = oevent.clienty - disy; odiv.style.left = odivleft + 'px'; odiv.style.top = odivTop + 'px'; }; odiv.onmouseUp = function () {odiv.onmouseMove = null; odiv.onmouseup = null; }; Odiv.SetCapture (); devolver falso; // Bloquear el evento predeterminado y resolver el error Firefox}; }; </script>En este momento, en realidad no tenemos el problema de arrastrar el DIV cuando lo arrastramos rápidamente. De hecho, después de agregar SetCapture (), todos los eventos en toda la página web se recopilarán en este div.
De hecho, este texto no se seleccionará ahora. ¿Por qué? Debido a que todos los eventos en el texto y las imágenes ahora están en el Div, ¡ya no pueden obtener los eventos! Entonces, naturalmente, no serán seleccionados.
¿Por supuesto que hay otro problema ahora? ? ? ? Encontrará que cuando intente seleccionar esas palabras, no será seleccionado.
¿Qué tengo que hacer? Todos los eventos se concentran en el Div. . . !
Entonces, de hecho, este setCapture () es como un bloqueo. Ahora está bloqueado, y los eventos están en el Div. Ahora es suficiente para desbloquearlo. El correspondiente es libereCapture ();
releaseCapture (); es liberar la captura. De hecho, solo agréguelo cuando se levante el mouse.
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; var odivleft = oevent.clientx - disx; var odivTop = oevent.clienty - disy; odiv.style.left = odivleft + 'px'; odiv.style.top = odivTop + 'px'; }; odiv.onmouseUp = function () {odiv.onmouseMove = null; odiv.onmouseup = null; Odiv.ReleaseCapture (); }; Odiv.SetCapture (); devolver falso; // Bloquear el evento predeterminado y resolver el error Firefox}; };Ahora podemos resolver el problema de la selección de texto. Finalmente, nos sentamos y nos compatimos. De hecho, este setCapture () es incompatible, y es incorrecto ponerlo en otros navegadores.
Eso es muy simple. Solo necesitamos fusionar los códigos de este y el último. Solo haz un juicio IF compatible. Finalmente, se adjunta el código organizado
<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; if (odiv.setCapture) {odiv.onmouseMove = mouseMove; odiv.onmouseUp = mouseUp; Odiv.SetCapture (); // es decir 7 El siguiente texto no se seleccionará, en realidad es el texto o la imagen que no se puede obtener.} Else {document.onmouseMove = mouseMove; document.OnMouseUp = mouseUp; } function mouseMove (ev) {var oevent = ev || evento; var odivleft = oevent.clientx - disx; var odivTop = oevent.clienty - disy; odiv.style.left = odivleft + 'px'; odiv.style.top = odivTop + 'px'; } function mouseup (ev) {this.onmouseMove = null; this.onmouseUp = null; if (odiv.releaseCapture) {Odiv.ReleaseCapture (); // liberar captura}} return false; // Bloquear el evento predeterminado y resolver el error Firefox}; }; </script>Bien, todo se hace o (∩_∩) o jaja ~