Hari ini kami akan menyelesaikan beberapa masalah dalam prototipe menyeret terakhir. Mari kita lihat apa masalahnya?
Melampirkan kode JavaScript dari masalah sebelumnya untuk memfasilitasi semua orang untuk melihat masalah.
<script type = "text/javascript"> window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || peristiwa; disx = oevent.clientx - odiv.offsetleft; disy = oevent.clienty - odiv.offsettop; odiv.onmouseMove = function (ev) {var oevent = ev || peristiwa; odiv.style.left = oevent.clientx - disx+'px'; odiv.style.top = oevent.clienty - disy+'px'; }; odiv.onmouseUp = function () {odiv.onmouseMove = null; odiv.onmouseUp = null; }; }; }; </script>1. Jika mouse saya bergerak lebih cepat sekarang, Anda akan menemukan bahwa mouse keluar dari div ini, dan div tidak akan mengikuti mouse saat ini.
Lalu mengapa masalah ini terjadi?
Alasannya sebenarnya sangat sederhana. Kami menambahkan acara mousemove ke div, jadi begitu mouse menyimpang dari div, mousemove tidak akan lagi dipicu saat ini.
Solusi: Acara memuat pada dokumen, karena mouse Anda masih ada di halaman apa pun yang terjadi, mousemove akan dipicu apa pun yang terjadi, jadi itu akan cepat.
Kemudian kami memodifikasi kode yang sesuai.
<script type = "text/javascript"> window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || peristiwa; disx = oevent.clientx - odiv.offsetleft; disy = oevent.clienty - odiv.offsettop; // pada document load event.onMouseMove = function (ev) {var oevent = ev || peristiwa; odiv.style.left = oevent.clientx - disx+'px'; odiv.style.top = oevent.clienty - disy+'px'; }; odiv.onmouseUp = function () {document.onmouseMove = null; odiv.onmouseUp = null; }; }; }; </script>Maka masalah ini bisa diselesaikan.
2. Mari kita lihat masalah apa yang masih ada. Meskipun masalah menyeret dengan cepat diselesaikan, ketika saya memindahkan mouse ke posisi ini
Sekarang Anda dapat dengan jelas melihat bahwa mouse tidak ada di div. Jika Anda mengangkat mouse saat ini, Anda dapat melihat bahwa itu akan bergerak setelah Anda kembali. Ini bug lain!
Bahkan, pertanyaan ini sama dengan yang di atas. Jadi sangat mudah untuk dipecahkan, mari kita tambahkan mouseup ke dokumen, mari kita coba
document.onmouseUp = function () {document.onmouseMove = null; document.onmouseup = null; };Dengan cara ini, jika Anda pindah ke posisi Anda sekarang, tidak akan ada bug sebelumnya, dan tidak akan ada masalah dengan bergerak cepat. Semuanya normal.
3. Mari kita lihat masalah kompatibilitas browser
Faktanya, ada masalah di versi yang lebih rendah dari browser Firefox
. Bagaimana terjadinya? Ketika Anda menyeret pertama kali, itu benar. Saat Anda menyeretnya sekali, tekan dan pegang dan pindahkan, Anda akan menemukan bahwa akan ada bayangan di belakangnya. Apa yang terjadi dengan ini?
Faktanya, firefox yang kita seret sekarang adalah kereta. Jadi bagaimana jika kita menambahkan beberapa konten ke div
Anda akan menemukan bahwa tidak ada masalah sekarang.
Jadi bug Firefox hanya muncul di div kosong.
Larutan:
Bahkan, ini sangat sederhana. Kami hanya perlu memblokir acara default browser dan mengembalikan False; di Onmousedown. Mengapa menambahkannya ke onmousedown?
Anda dapat memikirkan peristiwa mana yang diseret dimulai? Dimulai dengan Onmousedown. Saat mouse ditekan, menyeret mulai. Jadi Anda perlu memuat Onmousedown.
Faktanya, itu hanya menambahkan pengembalian kalimat palsu; memblokir bug Firefox.
Dengan cara ini, tidak peduli bagaimana Anda menunda, tidak akan ada masalah.
Kode terlampir:
<script type = "text/javascript"> window.onload = function () {var odiv = document.getElementById ("div1"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || peristiwa; disx = oevent.clientx - odiv.offsetleft; disy = oevent.clienty - odiv.offsettop; // pada document load event.onMouseMove = function (ev) {var oevent = ev || peristiwa; odiv.style.left = oevent.clientx - disx+'px'; odiv.style.top = oevent.clienty - disy+'px'; }; document.onmouseUp = function () {document.onmouseMove = null; document.onmouseup = null; }; mengembalikan false; }; }; </script>Program ini sekarang lengkap, tetapi masih ada beberapa masalah dengan pengalaman pengguna.
Misalnya, jika pengguna dapat menyeret div ini keluar dari browser, bagaimana dia bisa menyelesaikannya?
Kemudian kami menambahkan penilaian. Ini sangat sederhana, jika Anda keluar dari kiri
, Itu langsung sama dengan 0, dan dia tidak bisa keluar dari kiri. Maka hal yang sama berlaku di atas.
Jadi bagaimana kita bisa mencegah diri kita keluar dari kanan? ? Buat saja gambar dan jelaskan. Bahkan, kita dapat menghitungnya dengan mengurangi lebar visual halaman dari Div.
Maka ini adalah nilai maksimum yang disebut. Cukup menilai jika jarak yang dipindahkan melebihi nilai maksimum ini, itu sama dengan nilai maksimum ini. Maka berikut ini sama.
Lampirkan kode lengkap:
<script type = "text/javascript"> // seret dan lepas div kosong. Versi rendah Firefox memiliki bug window.onload = function () {var odiv = document.geteLementById ("div1"); 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; // Seret keluar dari kiri if (odivleft <0) {odivleft = 0; } lain jika (odivleft> document.documentelement.clientwidth - odiv.offsetWidth) {odivleft = document.documentelement.clientwidth - odiv.offsetWidth; } if (odivtop <0) {odivtop = 0; } lain jika (odivtop> document.documentelement.clientHeight - odiv.offsetHeight) {odivtop = document.documentelement.clientHeight - 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>Maka hambatannya lebih lengkap sekarang. O (∩_∩) o