js untuk mencapai kemahiran seret dan lepas effect_javascript

Pertama, mari kita fahami peraturan asas dan isu latihan berorientasikan objek:

Tulis kaedah penulisan biasa dahulu, kemudian tukar kepada kaedah penulisan berorientasikan objek
Transformasi kaedah biasa

·Cuba untuk tidak mempunyai fungsi bersarang
·Boleh mempunyai pembolehubah global
·Letakkan pernyataan bukan tugasan dalam fungsi onload ke dalam fungsi berasingan

Tukar kepada berorientasikan objek

·Pembolehubah global ialah atribut
·Fungsi ialah kaedah
·Buat objek dalam onload
·Tukar isu penunjuk ini

Perbaiki reka letak kesan seretan dahulu:
Struktur HTML:

gaya csc:
#kotak{kedudukan: mutlak;lebar: 200px;tinggi: 200px;latar belakang: merah;}

Langkah pertama ialah menyemak seret dan lepas berorientasikan proses

Salin kod Kod adalah seperti berikut:

window.onload = fungsi (){
// Dapatkan elemen dan nilai awal
var oBox = document.getElementById('box'),
          disX = 0, disY = 0;
//Acara akhbar tetikus bekas
oBox.onmousedown = fungsi (e){
        var e = e ||. tetingkap. acara;
         disX = e.clientX - this.offsetLeft;
         disY = e.clientY - this.offsetTop;
          document.onmousemove = fungsi (e){
            var e = e || window.event;
oBox.style.left = (e.clientX - disX) 'px';
oBox.style.top = (e.clientY - disY) 'px';
        };
          document.onmouseup = fungsi (){
                document.onmousemove = null;
               document.onmouseup = null;
        };
         kembali palsu;
};
};

Langkah kedua ialah menulis semula berorientasikan proses menjadi berorientasikan objek

Salin kod Kod adalah seperti berikut:

window.onload = fungsi (){
var seret = Seret baharu('kotak');
Drag.init();
};
//Seret Pembina
fungsi Seret(id){
This.obj = document.getElementById(id);
This.disX = 0;
This.disY = 0;
}
Drag.prototype.init = fungsi (){
// penunjuk ini
var saya = ini;
This.obj.onmousedown = fungsi (e){
        var e = e ||          saya.mouseDown(e);
​​​​ //Sekat acara lalai
         kembali palsu;
};
};
Drag.prototype.mouseDown = fungsi (e){
// penunjuk ini
var saya = ini;
This.disX = e.clientX - this.obj.offsetLeft;
This.disY = e.clientY - this.obj.offsetTop;
Document.onmousemove = fungsi (e){
        var e = e ||. tetingkap. acara;
         saya.mouseMove(e);
};
Document.onmouseup = fungsi (){
         me.mouseUp();
}
};
Drag.prototype.mouseMove = fungsi (e){
This.obj.style.left = (e.clientX - this.disX) 'px';
This.obj.style.top = (e.clientY - this.disY) 'px';
};
Drag.prototype.mouseUp = fungsi (){
Document.onmousemove = null;
Document.onmouseup = null;
};

Langkah ketiga ialah melihat perbezaan dalam kod

Halaman utama menggunakan pembina untuk mencipta objek:

Salin kod Kod adalah seperti berikut:

//Seret Pembina
fungsi Seret(id){
This.obj = document.getElementById(id);
This.disX = 0;
This.disY = 0;
}

Ikuti peraturan yang ditulis sebelum ini dan ubah semua pembolehubah global menjadi atribut!

Kemudian tulis semua fungsi pada prototaip:

Salin kod Kod adalah seperti berikut:

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

Mari kita lihat fungsi init dahulu:

Salin kod Kod adalah seperti berikut:

Drag.prototype.init = fungsi (){
// penunjuk ini
var saya = ini;
This.obj.onmousedown = fungsi (e){
        var e = e ||          saya.mouseDown(e);
​​​​ //Sekat acara lalai
         kembali palsu;
};
};

Kami menggunakan pembolehubah saya untuk menyimpan penunjuk ini, supaya ralat yang ditunjukkan oleh ini tidak akan berlaku dalam kod seterusnya

Kemudian datang fungsi mouseDown:

Salin kod Kod adalah seperti berikut:

Drag.prototype.mouseDown = fungsi (e){
// penunjuk ini
var saya = ini;
This.disX = e.clientX - this.obj.offsetLeft;
This.disY = e.clientY - this.obj.offsetTop;
Document.onmousemove = fungsi (e){
        var e = e ||. tetingkap. acara;
         saya.mouseMove(e);
};
Document.onmouseup = fungsi (){
         me.mouseUp();
}
};

Apabila menulis semula ke dalam berorientasikan objek, perhatikan objek acara. Oleh kerana objek acara hanya muncul dalam acara, kita perlu menyimpan objek acara dalam pembolehubah dan kemudian meneruskannya melalui parameter!

Tiada apa yang perlu diberi perhatian dalam fungsi mouseMove dan fungsi mouseUp berikut!

Perkara yang perlu diberi perhatian

Mengenai isu penunjuk ini, ini amat penting dalam berorientasikan objek!

Bacaan lanjutan ini:

http://div.io/topic/809

Mengenai isu objek acara, objek acara hanya muncul dalam acara, jadi perhatikan semasa menulis kaedah!