Lassen Sie uns zunächst die Grundregeln und Probleme objektorientierter Übungen verstehen:
Schreiben Sie zuerst die normale Schreibmethode auf und ändern Sie sie dann in objektorientiertes Schreibbegriff
Gewöhnliche Methodenverformung
・ Versuchen Sie, keine verschachtelten Funktionen zu haben
・ Es kann globale Variablen geben
・ Fügen Sie Anweisungen in die Onload -Funktion ein, die keine Zuordnungen in separate Funktionen sind
Wechseln zu objektorientiert
・ Globale Variablen sind Attribute
・ Funktion ist Methode
・ Erstellen Sie ein Objekt in der Onload
・ Über die Änderung dieses Zeigers
Verbessern Sie zunächst das Layout des Drag -Effekts:
HTML -Struktur:
<div id = "box"> </div>
CSC -Stil:
#Box {Position: absolut; Breite: 200px; Höhe: 200px; Hintergrund: rot;}
Der erste Schritt besteht darin, den prozessorientierten Drag & Drop zu überprüfen
Die Codekopie lautet wie folgt:
window.onload = function () {
// Erhalten Sie das Element und den Anfangswert
var obox = document.getElementById ('box'),
disx = 0, Disy = 0;
// Container -Maus -Presseereignis
obox.onmousedown = function (e) {
var e = e || Fenster.Event;
disx = e.clientX - this.offsetleft;
Disy = e.clienty - this.offsettop;
document.onmousemove = function (e) {
var e = e || Fenster.Event;
Obox.Style.Left = (e.clientx - disx) + 'px';
Obox.Style.top = (e.clienty - Disy) + 'px';
};
document.onmouseUp = function () {
document.onmousemove = null;
document.onmouseUp = null;
};
false zurückgeben;
};
};
Schritt 2: Verfahren Sie prozessorientiert zu objektorientiertem Umfang
Die Codekopie lautet wie folgt:
window.onload = function () {
var drag = new Drag ('box');
Drag.init ();
};
// Konstruktor Drag
Funktion Drag (id) {
this.obj = document.getElementById (id);
this.disx = 0;
this.disy = 0;
}
Drag.Prototype.init = function () {
// dieser Zeiger
var me = this;
this.obj.onmouseDown = function (e) {
var e = e || Ereignis;
me.mousedown (e);
// Standard -Ereignisse blockieren
false zurückgeben;
};
};
Drag.Prototype.mouseDown = Funktion (e) {
// dieser Zeiger
var me = this;
this.disx = e.clientx - this.obj.offsetleft;
this.disy = e.clienty - this.obj.offsettop;
document.onmousemove = function (e) {
var e = e || Fenster.Event;
me.mousemove (e);
};
document.onmouseUp = function () {
me.mouseUp ();
}
};
Drag.Prototype.mousemove = Funktion (e) {
this.obj.style.left = (e.clientx - this.disx) + 'px';
this.obj.style.top = (e.clienty - this.disy) + 'px';
};
Drag.Prototype.mouseUp = function () {
document.onmousemove = null;
document.onmouseUp = null;
};
Schritt 3: Sehen Sie, was der Code anders ist
Auf der Startseite erstellt ein Konstruktor ein Objekt:
Die Codekopie lautet wie folgt:
// Konstruktor Drag
Funktion Drag (id) {
this.obj = document.getElementById (id);
this.disx = 0;
this.disy = 0;
}
Den vorherigen schriftlichen Regeln einhalten und globale Variablen in Attribute verwandeln!
Schreiben Sie dann alle Funktionen auf den Prototyp:
Die Codekopie lautet wie folgt:
Drag.Prototype.init = function () {
};
Drag.Prototype.mouseDown = function () {
};
Drag.Prototype.mousemove = function () {
};
Drag.Prototype.mouseUp = function () {
};
Schauen wir uns zuerst die Init -Funktion an:
Die Codekopie lautet wie folgt:
Drag.Prototype.init = function () {
// dieser Zeiger
var me = this;
this.obj.onmouseDown = function (e) {
var e = e || Ereignis;
me.mousedown (e);
// Standard -Ereignisse blockieren
false zurückgeben;
};
};
Wir verwenden die ME -Variable, um diesen Zeiger zu speichern, so dass der folgende Code nicht den von diesem Zeiger gezeigten Fehler zeigt.
Als nächstes kommt die MouseDown -Funktion:
Die Codekopie lautet wie folgt:
Drag.Prototype.mouseDown = Funktion (e) {
// dieser Zeiger
var me = this;
this.disx = e.clientx - this.obj.offsetleft;
this.disy = e.clienty - this.obj.offsettop;
document.onmousemove = function (e) {
var e = e || Fenster.Event;
me.mousemove (e);
};
document.onmouseUp = function () {
me.mouseUp ();
}
};
Wenn Sie es in objektorientierte Umschreibung umschreiben, sollten Sie auf das Ereignisobjekt achten. Da das Ereignisobjekt nur im Ereignis angezeigt wird, müssen wir die Ereignisobjektvariablen speichern und es dann durch die Parameter weitergeben!
In der Mousemove -Funktion und der Mausup -Funktion dahinter gibt es nichts zu achten!
Probleme, die sich bewusst sind
In Bezug auf die Frage dieses Zeigers ist dies besonders wichtig in objektorientiertem!
Diese Erweiterung Lesung:
http://div.io/topic/809
In Bezug auf das Problem von Ereignisobjekten erscheinen Ereignisobjekte nur in Ereignissen, sodass Sie beim Schreiben auf die Methode achten sollten!