Prinsip seret: Faktanya, jarak antara mouse dan sudut kiri atas tetap tidak berubah. Mari kita lihat gambar di bawah ini. Titik merah ini adalah mouse.
Seret drag sebenarnya berarti menghitung posisi objek melalui posisi mouse. Sesederhana itu dan sangat disengaja. Jadi bagaimana Anda menemukan jarak ini? ?
Perbedaan antara posisi mouse dan posisi objek adalah jarak itu, kan? Kemudian garis diagonal ini terdiri dari garis horizontal dan vertikal.
Mari kita lihat bagaimana program ini dilakukan.
<Div ID = "Div1"> </div>
Bahkan, apa yang dia ubah adalah bagian kiri div, dan kemudian dia mulai bergerak. Dalam hal ini, harus ada posisi absolut, bukan?
<style type = "text/css"> #div1 {width: 200px; Tinggi: 200px; Latar Belakang: Merah; Posisi: Absolute; } </style>Berikut adalah beberapa langkah: 1. Tekan mouse 2. Angkat mouse 3. Pindahkan mouse
<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; // browser kompatibel disx = oevent.clientx - odiv.offsetleft; // Posisi horizontal adalah posisi tikus - posisi div disy = oevent.clienty - odiv.offsettop; }; odiv.onmouseMove = function (ev) {var oevent = ev || peristiwa; odiv.style.left = oevent.clientx - disx+'px'; // posisi mouse saat ini -disx odiv.style.top = oevent.clienty - disy+'px'; }; }; </script>Bicaralah dengan gambar:
var odivleft = oevent.clientx - disx; Diagramnya sangat jelas
Mouseup Jangan lihat apa efeknya sekarang. .
Anda akan menemukan fenomena yang sangat menarik. Jika saya tidak menekan mouse, saya akan mengikuti saya. Mengapa ini? ? ?
Mari kita lihat mousemove: Tidak ada seorang pun di JavaScript yang menetapkan bahwa Anda harus menekan mouse sebelum Anda mulai, kan? Terlepas dari apakah Anda menekan mouse atau tidak, mousemove ini terjadi sepanjang waktu, jadi masalahnya datang dari sini. Sebelum mouse ditekan, seharusnya tidak ada respons ketika mouse bergerak di atasnya. Anda harus menekannya untuk bereaksi.
Oleh karena itu, mousemove ini tidak boleh ditambahkan segera setelah diluncurkan, tetapi harus menunggu sampai mouse ditekan dan kemudian menambahkan mousemove untuk melihat kode yang dimodifikasi.
Ngomong -ngomong, mouseup ditambahkan, dan perannya tercermin saat ini. Fungsinya adalah odiv.onmouseMove = null; Hapus acara Move,
Kalau tidak, ketika mouse Anda dinaikkan, objek akan tetap mengikuti Anda. odiv.onmouseUp = null; Jika tidak ada sampah yang tersisa, tidak ada gunanya mengangkat mouse.
Mari kita lihat kode yang dimodifikasi:
<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; // browser kompatibel disx = oevent.clientx - odiv.offsetleft; // Posisi horizontal adalah posisi tikus - posisi div disy = oevent.clienty - odiv.offsettop; odiv.onmouseMove = function (ev) {var oevent = ev || peristiwa; odiv.style.left = oevent.clientx - disx+'px'; // posisi mouse saat ini -disx odiv.style.top = oevent.clienty - disy+'px'; }; odiv.onmouseUp = function () {odiv.onmouseMove = null; odiv.onmouseUp = null; // tidak ada sampah yang tersisa, tidak ada gunanya mengangkat mouse}; }; }; </script>Sekarang kami melakukan hambatan dan drop sederhana, tentu saja masih ada beberapa masalah kecil yang harus diselesaikan.
Tapi apa pun yang terjadi, kita sudah memiliki prototipe seret. Kami akan menyelesaikan beberapa bug satu per satu di edisi berikutnya.