Dengan perkembangan zaman, pentingnya js semakin terasa.js tidak hanya dapat membuat halaman web (seperti kerangka Ext), tetapi juga membuat beberapa efek khusus web dengan ponsel. Bagaimanapun, mereka didasarkan pada Browser tidak ada hubungannya dengan platform. Sekarang aplikasi sistem Microsoft Windows 8 dapat dikembangkan menggunakan js.
Sekarang mari kita langsung ke intinya dan membahas tentang cara mengimplementasikan Div yang dapat diseret di js. Untuk mencapai fungsi ini, pertama-tama mari kita bahas idenya:
1. Tangkap peristiwa mousedown dari div mouse
2. Tangkap peristiwa pergerakan mouse pada dokumen
3. Membatalkan acara tersebut
Kalau begitu mari kita lihat kodenya:
Copy kode kodenya sebagai berikut:
fungsi Seret(id) {
var $ = fungsi (bendera) {
kembalikan dokumen.getElementById(bendera);
}
$(id).onmousedown = fungsi (e) {
var d = dokumen;
var halaman = {
acara: fungsi (evt) {
var ev = evt ||.jendela.acara;
kembalikan setiap;
},
halamanX: fungsi (evt) {
var e = ini.acara(evt);
kembalikan e.pageX ||(e.clientX + dokumen.body.scrollLeft - dokumen.body.clientLeft);
},
halamanY: fungsi (evt) {
var e = ini.acara(evt);
kembalikan e.pageY ||(e.clientY + dokumen.body.scrollTop - dokumen.body.clientTop);
},
lapisanX: fungsi (evt) {
var e = ini.acara(evt);
kembalikan e.layerX ||.e.offsetX;
},
lapisanY: fungsi (evt) {
var e = ini.acara(evt);
kembalikan e.layerY ||.e.offsetY;
}
}
var x = halaman.layerX(e);
var y = halaman.layerY(e);
jika (dv.setCapture) {
dv.setCapture();
}
else if (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = fungsi (e) {
var tx = halaman.halamanX(e) - x;
var ty = halaman.halamanY(e) - y;
dv.style.kiri = tx + "px";
dv.style.top = ty + "px";
}
d.onmouseup = fungsi () {
if (dv.releaseCapture) {
dv.releaseCapture();
}
else if (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
}
}
}
Analisis kode:
1.
Dapatkan objek div
Copy kode kodenya sebagai berikut:
var $ = fungsi (bendera) {
kembalikan dokumen.getElementById(bendera);
}
2. Tangkap peristiwa mousedown dokumen:
Ada potongan kode ini di dalamnya:
Copy kode kodenya sebagai berikut:
var halaman = {
acara: fungsi (evt) {
var ev = evt ||.jendela.acara;
kembalikan setiap;
},
halamanX: fungsi (evt) {
var e = ini.acara(evt);
kembalikan e.pageX ||(e.clientX + dokumen.body.scrollLeft - dokumen.body.clientLeft);
},
halamanY: fungsi (evt) {
var e = ini.acara(evt);
kembalikan e.pageY ||(e.clientY + dokumen.body.scrollTop - dokumen.body.clientTop);
},
lapisanX: fungsi (evt) {
var e = ini.acara(evt);
kembalikan e.layerX ||.e.offsetX;
},
lapisanY: fungsi (evt) {
var e = ini.acara(evt);
kembalikan e.layerY ||.e.offsetY;
}
}
Diantaranya, event mendapatkan event mouse, pageX dan pageY mendapatkan koordinat mouse, layerX dan layerY mendapatkan jarak antara mouse dan batas div.
Ada juga sepotong kode:
Copy kode kodenya sebagai berikut:
jika (dv.setCapture) {
dv.setCapture();
}
else if (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
Ini untuk menangkap event MouseMove dan MouseUp div. Jika Anda tidak tahu tx, Anda dapat memeriksanya secara online.
3. event MouseMove dan mouseUp pada dokumen:
Copy kode kodenya sebagai berikut:
d.onmousemove = fungsi (e) {
var tx = halaman.halamanX(e) - x;
var ty = halaman.halamanY(e) - y;
dv.style.kiri = tx + "px";
dv.style.top = ty + "px";
}
d.onmouseup = fungsi () {
if (dv.releaseCapture) {
dv.releaseCapture();
}
else if (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
}
Diantaranya, tx dan ty adalah kode terpenting yang digunakan untuk mengatur koordinat div.
Beberapa orang mungkin bertanya mengapa -x,-y?
x, y sebenarnya mendapatkan jarak antara mouse dan batas div, jika tidak dikurangi
Koordinat panah mouse sama dengan koordinat x dan y pada div, setelah di drag maka posisi mouse akan berpindah ke pojok kiri atas.
Copy kode kodenya sebagai berikut:
if (dv.releaseCapture) {
dv.releaseCapture();
}
else if (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
Kode di atas adalah untuk membatalkan event onmousemove dan onmouseup pada dokumen setelah mouse dilepaskan.
Saya telah belajar js baru-baru ini, dan saya akan berbagi pengalaman baru saya dengan Anda di masa depan. Saya berharap dapat belajar dan membuat kemajuan bersama dengan semua orang.