js, um Drag-and-Drop-Effekt_Javascript-Fähigkeiten zu erlangen

Lassen Sie uns zunächst die Grundregeln und Probleme objektorientierter Übungen verstehen:

Schreiben Sie zuerst die normale Schreibmethode und ändern Sie sie dann in die objektorientierte Schreibmethode
Gewöhnliche Methodentransformation

·Versuchen Sie, keine verschachtelten Funktionen zu haben
·Kann globale Variablen haben
·Fügen Sie die Nichtzuweisungsanweisungen in der Onload-Funktion in eine separate Funktion

ein

Wechsel zu objektorientiert

·Globale Variablen sind Attribute
·Funktionen sind Methoden
·Erstellen Sie Objekte in Onload
·Ändern Sie dieses Zeigerproblem

Verbessern Sie zunächst das Layout des Drag-Effekts:
HTML-Struktur:

csc-Stil:
#box{position: absolute;width: 200px;height: 200px;background: red;}

Der erste Schritt besteht darin, prozessorientiertes Drag & Drop zu überprüfen

Code kopieren Der Code lautet wie folgt:

window.onload = function (){
// Holen Sie sich das Element und den Anfangswert
var oBox = document.getElementById('box'),
          disX = 0, disY = 0;
//Container-Maus-Drücken-Ereignis
oBox.onmousedown = Funktion (e){
        var e = e || window.event;
          disX = e.clientX - this.offsetLeft;
         disY = e.clientY - this.offsetTop;
          document.onmousemove = function (e){
            var e = e || window.event;
oBox.style.left = (e.clientX - disX) 'px';
oBox.style.top = (e.clientY - disY) 'px';
        };
          document.onmouseup = function (){
                document.onmousemove = null;
               document.onmouseup = null;
        };
         return false;
};
};

Der zweite Schritt besteht darin, prozessorientiert in objektorientiert umzuschreiben

Code kopieren Der Code 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 = Funktion (e){
        var e = e ||. event;
         me.mouseDown(e);
​​​​ //Standardereignis blockieren
         return false;
};
};
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 = Funktion (e){
        var e = e || window.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;
};

Der dritte Schritt besteht darin, die Unterschiede im Code zu erkennen

Die Homepage verwendet einen Konstruktor, um ein Objekt zu erstellen:

Code kopieren Der Code lautet wie folgt:

//Konstruktor Drag
Funktion Drag(id){
This.obj = document.getElementById(id);
This.disX = 0;
This.disY = 0;
}

Befolgen Sie die zuvor geschriebenen Regeln und wandeln Sie alle globalen Variablen in Attribute um!

Dann schreiben Sie einfach die Funktionen auf den Prototyp:

Code kopieren Der Code lautet wie folgt:

Drag.prototype.init = function (){
};
Drag.prototype.mouseDown = function (){
};
Drag.prototype.mouseMove = function (){
};
Drag.prototype.mouseUp = function (){
};

Werfen wir zunächst einen Blick auf die Init-Funktion:

Code kopieren Der Code lautet wie folgt:

Drag.prototype.init = function (){
// dieser Zeiger
var me = this;
This.obj.onmousedown = Funktion (e){
        var e = e ||. event;
         me.mouseDown(e);
​​​​ //Standardereignis blockieren
         return false;
};
};

Wir verwenden die Variable me, um den Zeiger this zu speichern, sodass der Fehler, auf den this zeigt, im nachfolgenden Code nicht auftritt

Dann kommt die MouseDown-Funktion:

Code kopieren Der Code 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 = Funktion (e){
        var e = e || window.event;
         me.mouseMove(e);
};
Document.onmouseup = function (){
         me.mouseUp();
}
};

Achten Sie beim Umschreiben in objektorientiert auf das Ereignisobjekt. Da das Ereignisobjekt nur in Ereignissen vorkommt, müssen wir das Ereignisobjekt in Variablen speichern und es dann über Parameter übergeben!

Bei der folgenden MouseMove-Funktion und MouseUp-Funktion gibt es nichts zu beachten!

Dinge, die Sie beachten sollten

In Bezug auf das Problem dieses Zeigers ist dies besonders wichtig bei der Objektorientierung!
Diese erweiterte Lektüre:
http://div.io/topic/809

In Bezug auf das Problem der Ereignisobjekte erscheinen Ereignisobjekte nur in Ereignissen. Achten Sie daher beim Schreiben von Methoden darauf!