Contoh dalam artikel ini membagikan kepada Anda kode spesifik untuk mewujudkan efek drag mouse di JavaScript untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
:
Saya rasa kesulitan dari percobaan ini adalah menjaga posisi relatif kotak dan mouse tidak berubah. Bagaimana cara mencapai efek drag dengan menekan dan menggerakkan mouse
?
Kita perlu menggunakan tiga fungsi: onmousedown , onmousemove , dan onmouseup , yang masing-masing mewakili penekanan mouse, pergerakan mouse, dan pengangkatan mouse.
Dalam fungsi panggilan balik penekanan mouse , kita perlu mendapatkan posisi awal mouse melalui clientX dan clientY . dan melalui offsetLeft dan offsetTop mendapatkan posisi awal kotak, dan kemudian menghitung perbedaan antara posisi awal mouse dan posisi awal kotak;
dalam fungsi panggilan balik dari gerakan mouse , kita perlu mendapatkan posisi saat ini kotak berdasarkan selisih posisi mouse dengan posisi yang dihitung sebelumnya, lalu ubah nilai kiri dan atasnya, jangan lupa atur posisinya menjadi absolut (karena saya lupa...)
Dalam fungsi panggilan balik dari mouse lift , kita perlu menghapus pergerakan mouse dan mouse lift, dengan mengatur nilai onmousemove dan onmouseup menjadi nullPerhatikan juga
! ! !
Baik fungsi gerak mouse maupun fungsi angkat mouse harus ditulis dalam fungsi tekan mouse, karena kita perlu merancang perilaku selanjutnya setelah tindakan menekan mouse, dan poin yang sangat penting adalah:
fungsi tekan mouse adalah p, dan mouse Memindahkan dan mengangkat mouse ada di dalam dokumen
karena yang kami maksud bukan menggerakkan mouse di p, tetapi memindahkan seluruh halaman.
Poin utamanya mungkin adalah sebagai berikut:
<!DOCTYPE html>
<html>
<kepala>
<meta charset="UTF-8">
<meta http-equiv="Kompatibel dengan X-UA" content="IE=Edge">
<meta name="viewport" content="width=lebar perangkat, skala awal=1.0">
<title>Dokumen</title>
<gaya>
#kotak{
lebar: 100 piksel;
tinggi: 100 piksel;
warna latar: aquamarine;
radius batas: 14 piksel;
bayangan kotak: 2px 2px 6px rgba(0,0,0,.3);
/* Orang baik ingin pindah dan berpindah ke kiri tanpa mengatur posisi. . . */
posisi: mutlak;
}
</gaya>
</kepala>
<tubuh>
<div id="kotak"></div>
<skrip>
biarkan kotak=document.getElementById("kotak");
box.onmousedown=fungsi(acara){
biarkan disx=event.clientX-box.offsetLeft;
biarkan disy=event.clientY-box.offsetTop;
//Ini bukan box.onmousemove, tapi dokumen.onmousemove
document.onmousemove=fungsi(acara){
box.style.left=acara.clientX-disx+'px';
box.style.top=acara.clientY-disy+'px';
}
//Untuk ditulis dalam dokumen omniusedown.onmouseup=function(){
//Keduanya harus disetel ke null
dokumen.onmousemove=null;
dokumen.onmouseup=null;
kembali salah;
}
}
</skrip>
</tubuh>
</html> Rekomendasi terkait: [Tutorial video JavaScript]
Di atas adalah detail konten js untuk mensimulasikan peristiwa tarikan mouse (dengan contoh gambar dan teks). !
