Primeiro, vamos entender as regras e problemas básicos dos exercícios orientados a objetos:
Primeiro, escreva o método de escrita normal e depois altere-o para o termo de escrita orientado a objetos
Deformação do método comum
・ Tente não ter funções aninhadas
・ Pode haver variáveis globais
・ Coloque declarações na função Onload que não são atribuições em funções separadas
Mude para orientado a objetos
・ Variáveis globais são atributos
・ A função é o método
・ Crie um objeto no Onload
・ Sobre mudar este ponteiro
Primeiro, melhore o layout do efeito de arrasto:
Estrutura HTML:
<div id = "caixa"> </div>
Estilo CSC:
#Box {Posição: Absoluto; Width: 200px; Hight: 200px; Background: Red;}
O primeiro passo é revisar o arrasto e soltar orientados para o processo
A cópia do código é a seguinte:
window.onload = function () {
// Obtenha o elemento e o valor inicial
var obox = document.getElementById ('caixa'),
disx = 0, disy = 0;
// Evento de imprensa de contêiner mouse
obox.onmousedown = function (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;
};
retornar falso;
};
};
Etapa 2: reescrever o processo orientado a objetos para o objetivo
A cópia do código é a seguinte:
window.onload = function () {
var arrast = new Drag ('Box');
drag.init ();
};
// arrasto do construtor
função arrastar (id) {
this.obj = document.getElementById (id);
this.disx = 0;
this.disy = 0;
}
Drag.prototype.init = function () {
// este ponteiro
var Me = this;
this.obj.onmousedown = function (e) {
var e = e || evento;
me.mousedown (e);
// bloqueia eventos padrão
retornar falso;
};
};
Drag.prototype.mousedown = function (e) {
// este ponteiro
var Me = this;
this.disx = e.clientX - this.obj.offsetleft;
this.disy = e.clienty - this.obj.offsettop;
document.onMousEmove = function (e) {
var e = e || Window.Event;
me.mouseMove (e);
};
document.onmouseup = function () {
me.mouseup ();
}
};
Drag.prototype.mouseMove = function (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;
};
Etapa 3: veja o que o código é diferente
A página inicial usa um construtor para criar um objeto:
A cópia do código é a seguinte:
// arrasto do construtor
função arrastar (id) {
this.obj = document.getElementById (id);
this.disx = 0;
this.disy = 0;
}
Cumprir as regras escritas anteriores e transformar variáveis globais em atributos!
Em seguida, escreva todas as funções no protótipo:
A cópia do código é a seguinte:
Drag.prototype.init = function () {
};
Drag.prototype.mousedown = function () {
};
Drag.prototype.mouseMove = function () {
};
Drag.prototype.mouseup = function () {
};
Vamos dar uma olhada na função init primeiro:
A cópia do código é a seguinte:
Drag.prototype.init = function () {
// este ponteiro
var Me = this;
this.obj.onmousedown = function (e) {
var e = e || evento;
me.mousedown (e);
// bloqueia eventos padrão
retornar falso;
};
};
Usamos a variável ME para salvar este ponteiro, para que o código a seguir não mostre o erro apontado por este ponteiro.
Em seguida é a função de Mousedown:
A cópia do código é a seguinte:
Drag.prototype.mousedown = function (e) {
// este ponteiro
var Me = this;
this.disx = e.clientX - this.obj.offsetleft;
this.disy = e.clienty - this.obj.offsettop;
document.onMousEmove = function (e) {
var e = e || Window.Event;
me.mouseMove (e);
};
document.onmouseup = function () {
me.mouseup ();
}
};
Ao reescrever-o em objetos orientados a objetos, você deve prestar atenção ao objeto de evento. Como o objeto de evento aparece apenas no evento, precisamos salvar as variáveis do objeto de evento e depois passá -lo pelos parâmetros!
Não há nada para prestar atenção na função de mousemove e na função do mouseup por trás dela!
Questões a serem cientes
Em relação à questão deste ponteiro, isso é particularmente importante na orientação de objetos!
Esta leitura de extensão:
http://div.io/topic/809
Em relação à questão dos objetos do evento, os objetos de eventos aparecem apenas nos eventos, então você deve prestar atenção ao método ao escrever!