Ich bin heute ein bisschen glücklich. Der CSDN -Blog hat mehr als 10.000 Aufrufe. Ich hatte in der Vergangenheit noch nie eine so hohe Anzahl von Ansichten. Ich muss sagen, dass ich zu oft immer noch ein bisschen anmaßend bin, aber ich kann immer noch nicht anders, als glücklich zu sein, wenn ich diese Ermutigung sehe. Zumindest fühle ich mich wie eine Person in der Branche. Ich bin nicht allein.
Setzen Sie ohne weiteres die heutige Aufnahme fort, zeichnen Sie die Wiederholungswiderstandsmarken auf und analysieren Sie sie aus dem Prozess:
1. Um die Ziehmarken wiederzugeben, müssen Sie sie zuerst aufzeichnen.
2. Um Drag -Spuren aufzunehmen, muss das Ziehen implementiert werden.
Dieses Problem wurde vor einigen Tagen durchgeführt und es war zu dieser Zeit etwas fehlerhaft, aber die allgemeine Implementierungsmethode war klar, also wurde ich heute viel schneller erkannt. Ich war wirklich glücklich. Nachdem ich es heute wieder bemerkt habe, habe ich es ein wenig tiefer verstanden, also werde ich es heute aufzeichnen.
In Bezug auf die Aufzeichnung von Drag -Spuren wird diese Analyse schließlich kurz sein, ich habe es einmal gemacht:
1. Bestimmen Sie die aktuelle Position und den Status des DIV, um sicherzustellen, dass absolut zum Ziehen verwendet werden kann.
2. Hören Sie sich Maus -Drag -Ereignisse an (mehrere gestern zusammengefasste Mausereignisse);
3.. Machen Sie eine entsprechende Antwort basierend auf dem entsprechenden Mausereignis und zeichnen Sie die Punkte auf, an denen die DIV im Onmousemove -Drag -and -Drop existiert.
V.
Implementieren wir zunächst den folgenden Code (alle Codes werden hier gleichzeitig aufgeführt und nacheinander analysiert):
HTML -Sprache:
<div id = "totzone"> </div> // Dies ist immer noch so vertraut <a href = "#" style = "Position: absolut; margin-top: 100px; color: gelb; backgropp-color: rot;"> Wiederer
JavaScript -Teil:
window.onload = function () {var obj = document.getElementById ("totzone"); var disx = disy = 0; var dragif = false; var Position = [{x: obj.offsetleft, y: obj.offsettop}]; // Dies ist der Schlüssel zur Implementierung von Aufnahmen und Wiedergabe, und die anderen erhalten alle grundlegende Elemente var oa = document.getElementsBytagname ("a") [0]; obj.onmouseDown = function (Ereignis) {var event = event || window.event; disx = event.clientX-obj.offsetleft; // Die Entfernung der Maus zur Div-Grenze Disy = Event.Clienty-Obj.offsettop; Dragif = true; // Die Flag -Position.push ({x: obj.offsetleft, y: obj.offsettop}); // Der Datensatz startet ab diesem Zeitpunkt zurück. }; document.onmousemove = function (Ereignis) {if (! Dragif) return; // Dieses Urteil ist äußerst wichtig, nur die gedrückte Bewegung kann gültig sein var Ereignis = Ereignis || window.event; var nowx = event.clientX-disx; // Gemäß der Abteilung der oben aufgezeichneten Maus zum Div können Sie die Entfernung der Div zu der Webseite Var nowy = event.clienty-disy kennen; var maxx = document.documentElement.clientwidth-Obj.offsetwidth; // Dies ist die Offsetwidth, die die Breite des DIV ist, nicht offsetleft var maxy = document.documentElement.clientHeight-Obj.offsetelht; NOWX = NOWX <0? 0: NOWX; // Diese Urteile sollen nur beurteilen, dass es keine Grenze gibt. NOWX = NOWX> MAXX? MAXX: NOWX; jetzty = nowy> maxy? maxy: nowy; Obj.Style.Margintop = Obj.Style.Marginleft = 0; obj.style.left = nowx+"px"; // nicht vergessen+"px", nur style.left/top ist obj.style.style.top = nowy+"px" mit "px"; Position.push ({x: nowx, y: nowy}); // zeichnen obj.innerhtml = "x:"+nowx+"y:"+nowy; // Siehe Änderungen intuitiv zurückzusetzen; }; document.onmouseUp = function () {Dragif = false; // Drag & Record obj.innerhtml = "x:"+obj.offsetleft+"y:"+obj.offsettop; }; oa.onclick = function () {if (Position.Length == 1) return; // Wenn nur eins vorhanden ist, bedeutet dies, dass der Var -Timer nicht verschoben wird. = setInterval (function () {var opos = Position.pop (); opos? (obj.style.left = opos.x + "px", obj.style.top = opos.y + "px"): ClearInterval (Timer); // Ein weiteres erstauntes Schreiben}, 30); false zurückgeben; }; };Ein paar wichtige Punkte, um darauf zu achten:
1. VAR -Positionsarray, Satz von Punkten: Dieser Punkt ist der sich bewegende Punkt in der oberen linken Ecke des DIV, dh die Bewegungstrajektorie, die wir aufzeichnen, ist tatsächlich der Satz von Punkten in der oberen linken Ecke des DIV, OffsetLeft ist die X -Koordinate, Offsettop ist die y -Koordinate, Sie wissen, wie Sie diese Koordinaten -Axis zeichnen können.
2. im Programm erscheinen mehrere Längen oder Entfernungen: OffsetLeft, Clientx, Offsetwidth, style.left, document.documentElement.clientwidth usw.;
3. Push () Methode: Fügen Sie Elemente zum Ende des Arrays hinzu, ändern Sie die Länge des Arrays und das Ende;
4. Pop () Methode: Löschen und geben Sie das letzte Element des Arrays zurück. Es gibt zwei wichtige Punkte: Return the Last Element; das andere: Löschen Sie das Element, und die Länge des Arrays wird kleiner;
Auf diese Weise haben wir die rückständige Wiedergabe erkannt, sodass das Implementierungsprinzip nicht erwähnen muss. Wenn wir direkte Wiedergabe haben, sollten wir den ersten Wert des Arrays bekommen und löschen? Haha, versuche es zu schreiben und zu lesen.
Ich muss sagen, dass es bequemer ist, mit der Maus zu ziehen. Es ist zu unpraktisch, um die Tastatur zu bewegen. Sie können mit der Maus skrupisch mit der Maus ziehen ... der Himmel ist bereits benommen und es wird heiß, aber heute ist in Ordnung ...