Hari ini kita akan melihat bagaimana mencegah menyeret objek dari diseret keluar dari div tertentu dan menyeret fungsi adsorpsi.
Terakhir kali, kami berbicara tentang menyeret dan menjatuhkan kami, kami tidak bisa keluar dari area visual. Atas dasar ini, kami menambahkan div induk untuk mencegahnya keluar dari induk. Prinsipnya sama seperti sebelumnya, sederhana.
Kode HTML:
<Div ID = "Div2"> <Div ID = "Div1"> </div> </div>
Kode CSS:
<style type = "text/css"> #div1 {width: 100px; Tinggi: 100px; Latar Belakang: Merah; Posisi: Absolute; } #Div2 {width: 400px; Tinggi: 300px; Latar Belakang: #CCCCCC; Posisi: kerabat; } </style>Kode JavaScript:
<script type = "text/javascript"> // seret dan lepas div kosong. Versi rendah Firefox memiliki bug window.onload = function () {var odiv = document.getElementById ("div1"); var odiv2 = document.geteLementById ("div2"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || peristiwa; disx = oevent.clientx - odiv.offsetleft; disy = oevent.clienty - odiv.offsettop; document.onmouseMove = function (ev) {var oevent = ev || peristiwa; // Simpan lokasi saat ini dari div var odivleft = oevent.clientx - disx; var odivtop = oevent.clienty - disy; if (odivleft <0) {odivleft = 0; } lain jika (odivleft> odiv2.offsetWidth - odiv.offsetWidth) {odivleft = odiv2.offsetWidth - odiv.offsetWidth; } if (odivtop <0) {odivtop = 0; } lain jika (odivtop> odiv2.offsetHeight - odiv.offsetheight) {odivtop = odiv2.offsetHeight - odiv.offsetHeight; } odiv.style.left = odivleft + 'px'; odiv.style.top = odivtop + 'px'; }; document.onmouseUp = function () {document.onmouseMove = null; document.onmouseup = null; }; mengembalikan false; // Blokir acara default dan selesaikan bug Firefox}; }; </script>Rendering adalah sebagai berikut:
Itu sederhana.
Hal berikutnya adalah bagaimana membuatnya secara otomatis menyerap.
Bahkan, ini sering digunakan oleh orang -orang. Misalnya, ketika ada jendela kecil di PS menyeretnya ke tepi halaman, itu akan secara otomatis melampirkannya.
Bagaimana drag and drop kita dapat memiliki fungsi seperti itu?
Ini sebenarnya disebutkan selama latihan sebelumnya. Ini seperti naik taksi dan Anda tidak bisa membiarkan pengemudi parkir di sana. Dia harus diparkir di dekat tujuan.
Hal yang sama berlaku untuk program ini. Sama seperti hampir waktunya untuk sampai di sana, itu dapat ditugaskan secara langsung. Misalkan objek yang saya seret berjarak 50 px dari kiri, saya pikir itu di sebelah kiri, dan jika langsung ditugaskan ke 0, itu akan secara otomatis menyerap.
Prinsipnya sangat sederhana, mari kita lihat bagaimana kode diimplementasikan. Buat sedikit modifikasi
<script type = "text/javascript"> window.onload = function () {var odiv = document.getElementById ("div1"); var odiv2 = document.geteLementById ("div2"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || peristiwa; disx = oevent.clientx - odiv.offsetleft; disy = oevent.clienty - odiv.offsettop; document.onmouseMove = function (ev) {var oevent = ev || peristiwa; var odivleft = oevent.clientx - disx; var odivtop = oevent.clienty - disy; // Ketika kiri kurang dari 50, secara otomatis akan menjadi 0. Ini akan mewujudkan adsorpsi jika (Odivleft <50) {odivleft = 0; } lain jika (odivleft> odiv2.offsetWidth - odiv.offsetWidth) {odivleft = odiv2.offsetWidth - odiv.offsetWidth; } if (odivtop <0) {odivtop = 0; } lain jika (odivtop> odiv2.offsetHeight - odiv.offsetheight) {odivtop = odiv2.offsetHeight - odiv.offsetHeight; } odiv.style.left = odivleft + 'px'; odiv.style.top = odivtop + 'px'; }; document.onmouseUp = function () {document.onmouseMove = null; document.onmouseup = null; }; mengembalikan false; }; }; </script>Lain kali, kita akan berbicara tentang aplikasi lanjutan, yang akan lebih bertanggung jawab dan bermanfaat. Fungsi drag and drop kami telah ditingkatkan.
Misalnya, menyeret gambar dan memilih teks. Misalnya, hanya ada satu div pada halaman seret yang saat ini kami gunakan, yang tidak akan kami temui dalam pengembangan normal.
Bahkan, ketika ada sesuatu di halaman, masalah apa yang akan terjadi dengan hambatan ini? ? ?
Akan diselesaikan lain kali ~ Harap nantikannya