Hari ini kita akan melihat bagaimana untuk menghalang objek yang diseret daripada diseret keluar dari div tertentu dan fungsi penjerapan menyeret
Seperti yang dinyatakan pada kali lepas, penyeretan kami tidak boleh diseret keluar dari kawasan visual Atas dasar ini, kami menambah div induk untuk mengelakkannya daripada diseret keluar daripada induk. Prinsipnya sama seperti dahulu, mudah.
kod html:
1 2 3 4 5 |
|
kod css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
kod javascript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
|
Rendering adalah seperti berikut:
Pastikan ia mudah.
Langkah seterusnya ialah bagaimana untuk menjadikannya menyerap secara automatik.
Malah, semua orang akan kerap menggunakan ini Sebagai contoh, apabila terdapat tetingkap kecil dalam PS dan diseret ke tepi halaman, ia secara automatik akan menjerap ke dalamnya.
Bagaimanakah seret dan lepas kita boleh mempunyai fungsi sedemikian?
Ini sebenarnya disebut sebelum ini apabila bercakap tentang senaman Sama seperti menaiki teksi, anda tidak boleh meminta pemandu untuk berhenti tepat di tempat yang anda mahu dia berhenti di suatu tempat yang dekat dengan destinasi.
Prosedurnya adalah sama, cuma tetapkan nilai terus apabila ia hampir sampai. Anggapkan bahawa apabila objek yang saya seret ialah 50px dari kiri, saya fikir ia telah sampai ke kiri, dan kemudian berikannya nilai 0, dan ia akan secara automatik melekat padanya.
Prinsipnya sangat mudah, mari lihat cara kod melaksanakannya. Hanya buat sedikit pengubahsuaian
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
|
Lain kali kita akan bercakap tentang aplikasi lanjutan, yang akan menjadi lebih bertanggungjawab dan berguna. Fungsi seret dan lepas kami telah dipertingkatkan.
Contohnya, menyeret gambar dan memilih teks. Sebagai contoh, halaman seret dan lepas semasa kami hanya mempunyai satu div, yang tidak akan pernah kami temui dalam pembangunan biasa.
Sebenarnya, apabila terdapat sesuatu pada halaman, apakah masalah yang akan berlaku dengan seret dan lepas ini? ? ?
Ia akan diselesaikan pada masa akan datang ~ Sila nantikannya