js untuk mensimulasikan peristiwa seret tetikus (dengan contoh gambar dan teks)

Contoh dalam artikel ini berkongsi kod khusus untuk merealisasikan kesan seretan tetikus dalam JavaScript untuk rujukan anda Kandungan khusus adalah seperti berikut

Rendering kali ini adalah seperti berikut:

Saya rasa kesukaran eksperimen ini adalah untuk mengekalkan kedudukan relatif kotak dan tetikus tidak berubah, dan mencapai kesan seretan dengan menekan dan menggerakkan tetikus

Bagaimana untuk mencapainya Bagaimana pula dengan kesan menyeret?

Kita perlu menggunakan tiga fungsi: onmousedown, onmousemove, onmouseup, yang masing-masing mewakili menekan tetikus, menggerakkan tetikus dan menaikkan tetikus

dalam Dalam fungsi panggil balik menekan tetikus , kita perlu mendapatkan kedudukan awal tetikus melalui clientX dan clientY, dapatkan kedudukan awal kotak melalui offsetLeft dan offsetTop, dan kemudian hitung Perbezaan antara kedudukan awal tetikus dan kedudukan awal kotak; untuk mengira perbezaan antara kedudukan tetikus dan yang sebelumnya Untuk mendapatkan kedudukan semasa kotak, dan kemudian menukar nilai kiri dan atasnya, jangan lupa untuk menetapkan kedudukan kepada mutlak (kerana saya terlupa...)

dalam panggilan balik angkat tetikus Dalam fungsi, kita perlu mengosongkan pergerakan tetikus dan angkat tetikus dengan menetapkan nilai dan kepada null

dan nota! ! ! onmousemoveonmouseupKedua-dua fungsi menggerakkan tetikus dan fungsi mengangkat mesti ditulis dalam fungsi menekan tetikus, kerana kita perlu mereka bentuk tingkah laku seterusnya selepas tindakan menekan tetikus, dan

sangat penting Satu perkara ialah:

Fungsi menekan tetikus ialah p, dan pergerakan tetikus serta mengangkat tetikus adalah dokumen

Kerana kami tidak bermaksud bahawa tetikus berada di p Daripada mengalihkan ke seluruh halaman

Perkara utama mungkin ini, berikut ialah kodnya:

Cadangan berkaitan: [

Tutorial video JavaScript

]

Atas ialah kandungan terperinci js untuk mensimulasikan peristiwa seret tetikus (dengan contoh gambar dan teks). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!