Saya sedikit senang hari ini. Blog CSDN memiliki lebih dari 10.000 tampilan. Saya tidak pernah memiliki jumlah pandangan yang begitu tinggi di masa lalu. Saya harus mengatakan bahwa saya masih terlalu sering terlalu sering, tetapi saya masih tidak bisa membantu tetapi bahagia ketika saya melihat dorongan ini. Setidaknya, ini membuat saya merasa seperti orang di industri ini. Saya tidak sendirian.
Tanpa basa -basi lagi, lanjutkan perekaman hari ini, catat tanda seret replay, dan analisis dari proses:
1. Untuk memutar ulang tanda seret, terlebih dahulu Anda merekamnya;
2. Untuk merekam jejak seret, seret harus diimplementasikan;
Masalah ini dilakukan beberapa hari yang lalu, dan itu sedikit cacat pada waktu itu, tetapi metode implementasi umumnya jelas, jadi hari ini saya menyadari masalah ini jauh lebih cepat. Saya sangat senang. Setelah menyadarinya lagi hari ini, saya memahaminya sedikit lebih dalam, jadi saya akan merekamnya hari ini;
Sedangkan untuk merekam jejak seret, analisis ini akan singkat, setelah semua, saya telah melakukannya sekali:
1. Tentukan posisi dan status Div saat ini untuk memastikan absolut dapat digunakan untuk menyeret;
2. Dengarkan acara drag mouse (beberapa acara mouse dirangkum kemarin);
3. Buat respons yang sesuai berdasarkan peristiwa mouse yang sesuai dan catat titik -titik di mana div ada dalam drag dan drop onMouseMove;
4. Dengarkan acara mouse bouncing untuk mengakhiri acara drag dan point record
Ngomong -ngomong, mari kita terapkan kode berikut terlebih dahulu (semua kode tercantum di sini pada saat yang sama dan dianalisis satu per satu nanti):
Bahasa HTML:
<Div id = "showzone"> </div> // Ini masih sangat akrab <a href = "#" style = "Posisi: absolute; margin-top: 100px; warna: kuning; latar belakang-kolor: merah;"> reback </a> // ini diputar bolak-balik
Bagian JavaScript:
window.onload = function () {var obj = document.geteLementById ("showzone"); var disx = disy = 0; var dragif = false; var position = [{x: obj.offsetleft, y: obj.offsettop}]; // Ini adalah kunci untuk mengimplementasikan perekaman dan pemutaran, dan yang lainnya semuanya mendapatkan elemen dasar var oa = document.getElementsbyTagname ("a") [0]; obj.onmousedown = function (event) {var event = event || window.event; disx = event.clientx-obj.offsetleft; // jarak mouse ke perbatasan div disy = event.clienty-obj.offsettop; dragif = true; // Posisi bendera.push ({x: obj.offsetleft, y: obj.offsettop}); // catatan dimulai dari waktu ini mengembalikan false; }; document.onmouseMove = function (event) {if (! dragif) return; // penilaian ini sangat penting, hanya gerakan yang ditekan dapat valid var event = event || window.event; var nowx = event.clientx-disx; // Menurut jarak mouse yang direkam di atas ke div, Anda dapat mengetahui jarak div ke halaman web var nowy = event.clienty-disy; var maxx = document.documentelement.clientwidth-obj.offsetwidth; // Ini adalah offsetwidth, yang merupakan lebar div, bukan offsetleft var maxy = document.documentelement.clientheight-obj.offsetheight; nowx = nowx <0? 0: nowx; // penilaian ini hanya untuk menilai bahwa tidak ada batas sekarang = nowy <0? 0: nowy; nowx = nowx> maxx? maxx: nowx; Nowy = Nowy> Maxy? Maxy: Nowy; obj.style.margintop = obj.style.marginleft = 0; obj.style.left = nowx+"px"; // jangan lupa+"px", hanya style.left/top yang obj.style.style.top = nowy+"px" dengan "px"; Position.push ({x: nowx, y: nowy}); // Rekam obj.innerhtml = "x:"+nowx+"y:"+nowy; // lihat perubahan secara intuitif mengembalikan false; }; document.onmouseUp = function () {dragif = false; // seret dan rekam obj.innerHtml = "x:"+obj.offsetleft+"y:"+obj.offsettop; }; oa.onClick = function () {if (position.length == 1) return; // Ketika hanya ada satu, itu berarti bahwa var timer tidak dipindahkan. = setInterval (function () {var opos = position.pop (); opos? (obj.style.left = opos.x + "px", obj.style.top = opos.y + "px"): clearInterval (timer); // yang kagum dengan tulisan ini}, 30); mengembalikan false; }; };Beberapa poin penting untuk memperhatikan:
1. Var Posisi Array, Set Poin: Titik ini adalah titik bergerak di sudut kiri atas Div, yaitu, lintasan gerakan yang kami rekam sebenarnya adalah himpunan titik di sudut kiri div, offsetleft adalah koordinat x, offsettop adalah koordinat Y, Anda tahu cara menggambar sumbu koordinat ini;
2. Beberapa panjang atau jarak yang muncul dalam program: offsetleft, clientx, offsetwidth, style.left, document.documentelement.clientwidth, dll.;
3. Metode Push (): Tambahkan elemen ke ujung array, ubah panjang array, dan end;
4. Metode Pop (): Hapus dan kembalikan elemen terakhir dari array. Ada dua poin utama, satu: kembalikan elemen terakhir; Yang lain: Hapus elemen, dan panjang array menjadi lebih kecil;
Dengan cara ini, kami telah menyadari pemutaran mundur, jadi tidak perlu menyebutkan prinsip implementasi. Jika kita memiliki pemutaran langsung, haruskah kita mendapatkan dan menghapus nilai pertama dari array? Haha, cobalah menulis dan membacanya.
Saya harus mengatakan bahwa lebih nyaman untuk menyeret dengan mouse. Terlalu merepotkan untuk memindahkan keyboard. Anda dapat menyeret dan menyeret dengan mouse dengan tidak bermoral ... langit sudah linglung dan akan menjadi panas, tapi hari ini baik -baik saja ...