js, um Drag-and-Drop-Effekt_Javascript-Fähigkeiten zu erlangen-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 16:14:10

Original

1054 Leute haben es durchsucht

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!