js pour acquérir des compétences de glisser-déposer effect_javascript

Commençons par comprendre les règles et enjeux de base des exercices orientés objet :

Écrivez d'abord la méthode d'écriture normale, puis remplacez-la par la méthode d'écriture orientée objet
Transformation de méthode ordinaire

·Essayez de ne pas avoir de fonctions imbriquées
·Peut avoir des variables globales
·Mettez les instructions de non-affectation de la fonction onload dans une fonction distincte

Passer à l'orientation objet

·Les variables globales sont des attributs
·Les fonctions sont des méthodes
·Créer des objets en onload
·Modifiez ce problème de pointeur

Améliorez d'abord la disposition de l'effet de glisser :
Structure HTML :

style csc :
#box{position : absolue;largeur : 200px;hauteur : 200px;arrière-plan : rouge;}

La première étape consiste à revoir le glisser-déposer orienté processus

Copier le code Le code est le suivant :

window.onload = fonction (){
// Récupère l'élément et la valeur initiale
var oBox = document.getElementById('box'),
          disX = 0, disY = 0;
//Événement de presse de souris de conteneur
oBox.onmousedown = fonction (e){
        var e = e || window.event;
          disX = e.clientX - this.offsetLeft;
         disY = e.clientY - this.offsetTop;
          document.onmousemove = fonction (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 ;
};
};

La deuxième étape consiste à réécrire l'orienté processus en orienté objet

Copier le code Le code est le suivant :

window.onload = fonction (){
var drag = new Drag('box');
Drag.init();
};
// Glissement du constructeur
fonction Glisser(id){
This.obj = document.getElementById(id);
Ceci.disX = 0;
This.disY = 0;
>
Drag.prototype.init = fonction (){
// ce pointeur
var moi = ceci;
This.obj.onmousedown = fonction (e){
        var e = e || événement ;
         me.mouseDown(e);
​​​​ //Bloquer l'événement par défaut
         return false ;
};
};
Drag.prototype.mouseDown = fonction (e){
// ce pointeur
var moi = ceci;
This.disX = e.clientX - this.obj.offsetLeft;
This.disY = e.clientY - this.obj.offsetTop;
Document.onmousemove = fonction (e){
        var e = e || window.event;
         me.mouseMove(e);
};
Document.onmouseup = fonction (){
         me.mouseUp();
>
};
Drag.prototype.mouseMove = fonction (e){
This.obj.style.left = (e.clientX - this.disX) 'px';
This.obj.style.top = (e.clientY - this.disY) 'px';
};
Drag.prototype.mouseUp = fonction (){
Document.onmousemove = null;
Document.onmouseup = null;
};

La troisième étape consiste à voir les différences dans le code

La page d'accueil utilise un constructeur pour créer un objet :

Copier le code Le code est le suivant :

// Glissement du constructeur
fonction Glisser(id){
This.obj = document.getElementById(id);
Ceci.disX = 0;
This.disY = 0;
>

Suivez les règles écrites précédemment et transformez toutes les variables globales en attributs !

Ensuite, écrivez simplement les fonctions sur le prototype :

Copier le code Le code est le suivant :

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

Jetons d'abord un coup d'œil à la fonction init :

Copier le code Le code est le suivant :

Drag.prototype.init = fonction (){
// ce pointeur
var moi = ceci;
This.obj.onmousedown = fonction (e){
        var e = e || événement ;
         me.mouseDown(e);
​​​​ //Bloquer l'événement par défaut
         return false ;
};
};

Nous utilisons la variable me pour enregistrer le pointeur this, afin que l'erreur signalée par ceci ne se produise pas dans le code suivant

Vient ensuite la fonction mouseDown :

Copier le code Le code est le suivant :

Drag.prototype.mouseDown = fonction (e){
// ce pointeur
var moi = ceci;
This.disX = e.clientX - this.obj.offsetLeft;
This.disY = e.clientY - this.obj.offsetTop;
Document.onmousemove = fonction (e){
        var e = e || window.event;
         me.mouseMove(e);
};
Document.onmouseup = fonction (){
         me.mouseUp();
>
};

Lorsque vous le réécrivez en mode orienté objet, faites attention à l'objet événement. Étant donné que l'objet événement n'apparaît que dans les événements, nous devons enregistrer l'objet événement dans des variables, puis le transmettre via des paramètres !

Il n'y a rien à surveiller dans les fonctions mouseMove et mouseUp suivantes !

Choses à noter

Concernant la problématique de ce pointeur, cela est particulièrement important en orienté objet !
Cette lecture prolongée :
http://div.io/topic/809

Concernant la problématique des objets événementiels, les objets événementiels n'apparaissent que dans les événements, alors faites attention lors de l'écriture des méthodes !