Heute werden wir einige Probleme im Prototyp des letzten Ziehens lösen. Mal sehen, was die Probleme sind?
Angehörte den JavaScript -Code aus der vorherigen Ausgabe, um alle zu erleichtern, um das Problem anzuzeigen.
<script type = "text/javaScript"> fenws.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var Disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || Ereignis; disx = oevent.clientX - odiv.offsetleft; Disy = oevent.clienty - odiv.offsettop; odiv.onmousemove = function (ev) {var oevent = ev || Ereignis; 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. Wenn sich meine Maus jetzt schneller bewegt, werden Sie feststellen, dass die Maus aus diesem Div herauskommt und die DIV der Maus zu diesem Zeitpunkt nicht folgt.
Warum tritt dieses Problem dann auf?
Der Grund ist eigentlich sehr einfach. Wir fügen das Mousemove -Ereignis in die DIV hinzu, sodass die Maus zu diesem Zeitpunkt nicht mehr ausgelöst wird.
Lösung: Das Ereignis lädt das Dokument, da sich Ihre Maus noch auf der Seite befindet, egal was passiert.
Dann ändern wir den Code entsprechend.
<script type = "text/javaScript"> fenws.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var Disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || Ereignis; disx = oevent.clientX - odiv.offsetleft; Disy = oevent.clienty - odiv.offsettop; // im Ereignislastdokument.onmousemove = Funktion (ev) {var oevent = ev || Ereignis; odiv.style.left = oevent.clientX - disx+'px'; odiv.style.top = oevent.clienty - Disy+'px'; }; odiv.onmouseUp = function () {document.onmousemove = null; odiv.onmouseUp = null; }; }; }; </script>Dann kann dieses Problem gelöst werden.
2. Mal sehen, welche Probleme noch da sind. Obwohl das Problem des schnellen Ziehens gelöst wurde, als ich die Maus in diese Position bewegte
Jetzt können Sie deutlich erkennen, dass die Maus nicht auf der DIV ist. Wenn Sie die Maus zu diesem Zeitpunkt anheben, können Sie feststellen, dass sie sich bewegt, nachdem Sie zurückgekommen sind. Das ist ein weiterer Fehler!
Tatsächlich ist diese Frage die gleiche wie die oben genannten. Es ist also sehr einfach zu lösen. Lassen Sie uns dem Dokument Mausup hinzufügen, versuchen wir es aus
document.onmouseUp = function () {document.onmousemove = null; document.onmouseUp = null; };Auf diese Weise gibt es auf diese Weise keinen vorherigen Fehler, wenn Sie zu der Position wechseln, und es wird kein Problem damit geben, sich schnell zu bewegen. Alles ist normal.
3.. Schauen wir uns die Browser -Kompatibilitätsprobleme an
Tatsächlich gibt es in der unteren Version des Firefox -Browsers ein solches Problem
. Wie ist es passiert? Wenn Sie das erste Mal ziehen, ist es richtig. Wenn Sie es einmal ziehen, drücken und halten und bewegen, werden Sie feststellen, dass sich ein Schatten dahinter befindet. Was ist damit los?
Tatsächlich ist das Firefox, das wir jetzt ziehen, fehlerhaft. Was ist, wenn wir dem Div einige Inhalte hinzufügen?
Sie werden feststellen, dass es jetzt kein Problem gibt.
Der Firefox -Fehler erscheint also nur im leeren Div.
Lösung:
Tatsächlich ist es sehr einfach. Wir müssen nur das Standard -Ereignis des Browsers blockieren und false zurückgeben. in Onmousedown. Warum es onmousedown hinzufügen?
Sie können überlegen, welches Ereignis das Schleppen beginnt? Es beginnt mit Onmousedown. Wenn die Maus gedrückt wird, beginnt das Ziehen. Sie müssen also Onmousedown laden.
Tatsächlich fügte es nur einen Satz zurück, der falsch zurückgeht. blockierte den Firefox -Fehler.
Auf diese Weise, egal wie Sie verzögern, wird es kein Problem geben.
Beigefügter Code:
<script type = "text/javaScript"> fenws.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var Disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || Ereignis; disx = oevent.clientX - odiv.offsetleft; Disy = oevent.clienty - odiv.offsettop; // im Ereignislastdokument.onmousemove = Funktion (ev) {var oevent = ev || Ereignis; odiv.style.left = oevent.clientX - disx+'px'; odiv.style.top = oevent.clienty - Disy+'px'; }; document.onmouseUp = function () {document.onmousemove = null; document.onmouseUp = null; }; false zurückgeben; }; }; </script>Das Programm ist jetzt vollständig, aber es gibt immer noch einige Probleme mit der Benutzererfahrung.
Wenn ein Benutzer beispielsweise diese Div aus dem Browser ziehen kann, wie kann er es dann lösen?
Dann fügen wir ein Urteil hinzu. Dies ist sehr einfach, wenn Sie von links ausgehen
Das ist direkt 0 und er kann nicht von links herauskommen. Dann gilt das gleiche oben.
Wie können wir uns also daran hindern, vom Recht auszugehen? ? Zeichnen Sie einfach ein Bild und machen Sie es klar. Tatsächlich können wir es berechnen, indem wir die visuelle Breite der Seite von der Div abziehen.
Dann ist dies der sogenannte Maximalwert. Beurteilen Sie einfach, ob der Abstand diesen Maximalwert überschreitet, und entspricht diesem Maximalwert. Dann ist das folgende gleich.
Fügen Sie den vollständigen Code bei:
<skript type = "text/javaScript"> // leere Divation ziehen und fallen lassen. Niedrige Version von Firefox hat Fehlerfenster.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var Disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || Ereignis; disx = oevent.clientX - odiv.offsetleft; Disy = oevent.clienty - odiv.offsettop; document.onmousemove = function (ev) {var oevent = ev || Ereignis; // Speichern Sie den aktuellen Standort des Div var odivleft = oevent.clientx - disx; var odivtop = oevent.clienty - Disy; // von links herausziehen if (odivleft <0) {odivleft = 0; } else if (odivleft> document.documentElement } if (odivtop <0) {odivtop = 0; } else if (odivtop> document.documentElement.clientHeight - odiv.offseteight) {odivtop = document.documentElement.clientHeight - odiv.offseteight; } odiv.style.left = odivleft + 'px'; odiv.style.top = odivtop + 'px'; }; document.onmouseUp = function () {document.onmousemove = null; document.onmouseUp = null; }; false zurückgeben; // Blockieren Sie das Standard -Ereignis und beheben Sie den Firefox -Fehler}; }; </script>Dann ist der Widerstand jetzt vollständiger. O (∩_∩) o