Memindahkan

Secara umum tidak ada masalah kompatibilitas ketika memberikan lokasi baru kepada elemen CSS-P Anda.

Untuk memindahkan elemen bernama "elemenku" ke koordinat (100,50), Anda dapat dengan mudah memberikan nilai properti left dan top baru:

elemenku.left = 100
elemenku.top = 50
Tetapi jangan lupa bahwa elemenku harus merupakan variabel penunjuk yang didefinisikan seperti berikut:
function init() {
	if (ns4) elemenku = document.elemenkuDiv
	if (ie4) elemenku = elemenkuDiv.style
}

Mulai sekarang, ini akan selalu ada pada semua contoh maka jangan lupa!

Seperti telah saya katakan, tidak ada masalah kompatibilitas ketika memberikan lokasi baru, tetapi ada masalah ketika mengambil lokasi sesaat dari sebuah elemen. Hal ini karena IE menyimpan lokasinya dengan akhiran "px" pada nilainya (seperti dapat dilihat pada contoh JavaScript Lintas Browser).

Untuk membuang akhiran "px" Anda dapat menyatakannya sebagai bilangan bulat (integer).

Maka daripada menulis

elemenku.left

Anda harus menulis

parseInt(elemenku.left)

Contohnya, jika Anda ingin menampilkan informasi lokasi kiri dan atas saat ini Anda harus menuliskan:

alert(parseInt(elemenku.left) + ", " + parseInt(elemenku.top))

Menambahkan Properti Baru

Sekarang percayalah, untuk selalu menulis parseInt() di depan semua variabel Anda akan cenderung menjengkelkan. Anda akan segera bertanya-tanya adakah cara yang lebih baik... dan saya kira saya mempunyai jawaban yang cukup baik atas hal tersebut.

Tidak ada yang menghentikan Anda dari menambahkan lebih banyak properti kepada variabel penunjuk atau objek kita, seperti yang cenderung saya sebut demikian mulai sekarang.

Yang saya sarankan Anda lakukan adalah menjaga lokasi sesaat dari elemen pada properti yang terpisah dari properti left dan top. Untuk membuat properti-properti baru ini Anda cukup hanya menugaskannya. Saya akan mulai dengan mengaturnya pada lokasi aktual:

elemenku.xpos = parseInt(elemenku.left)
elemenku.ypos = parseInt(elemenku.top)

Sekarang sejak saat ini, jika Anda perlu mengetahui posisi kiri atau kanan, Anda cukup memeriksa nilai berturut-turut elemenku.xpos dan elemenku.ypos. Maka alert() baru kita akan tampak seperti berikut:

alert(elemenku.xpos + "," + elemenku.ypos)

Dan Kekurangannya?

Ketika Anda mau mengubah lokasi elemen, anda PERTAMA-TAMA harus mengubah nilai xpos dan ypos. LALU Anda mengatur nilai left dan top berturut-turut sama dengan xpos dan ypos. Misalnya:

function move() {
	elemenku.xpos = 200
	elemenku.ypos = -40
	elemenku.left = elemenku.xpos
	elemenku.top = elemenku.ypos
}

Anda harus selalu menjaga nilai xpos dan ypos sinkron dengan nilai left dan top. Dengan cara ini jika Anda memeriksa elemenku.xpos, Anda tahu isinya selalu sama dengan elemenku.left.

Klik di sini untuk melihat contoh pemakaian teknik ini.

Tidak terlalu sulit bukan? Ini akan menjadi dasar dari semua yang akan saya tunjukkan pada contoh-contoh selanjutnya. Tampaknya sedikit bodoh untuk memasang variabel-variabel tambahan ini tetapi setelah Anda masuk ke hal-hal yang lebih rumit Anda akan menemukan teknik ini sungguh sangat membantu melancarkan kode Anda.


Catatan Pinggir:
Anda mungkin berpikir mengapa saya menggunakan xpos dan ypos sebagai properti saya dan bukan hanya x dan y.... Ya, saya melakukannya untuk alasan tertentu. Tidak banyak yang tahu bahwa Netscape sudah memasukkan properti-properti ini ke dalam CSS-P. Saya temukan bahwa jika Anda menggunakan x dan y makan nilai-nilainya akan selalu disimpan sebagai bilangan bulat. Sekarang Anda boleh berpikir "peduli amat?"... tetapi ada saat-saat di mana Anda harus menyimpan posisi kiri dan atas dengan lebih dari hanya bilangan bulat (yaitu bilangan real dengan desimal dan lain-lain) dan ini tidak mungkin jika Anda menggunakan x dan y.

Fungsi Memindahkan yang Generik

Pada contoh terakhir tadi saya menuliskan perpindahannya secara hard-coded — saya tuliskan fungsi terpisah untuk setiap pergerakan. Sekarang tentu saja jika Anda ingin memindahkan banyak lapisan yang berbeda Anda tidak ingin selalu terus-menerus menuliskan fungsi baru. Sehingga apa yang dapat kita lakukan adalah menciptakan beberapa fungsi generik yang akan dapat dipakai untuk kebanyakan jenis pergerakan.

Fungsi moveTo()

Fungsi moveTo() memindahkan lapisan/objek Anda dan memindahkannya langsung ke lokasi baru.

function moveTo(obj,x,y) {
	obj.xpos = x
	obj.left = obj.xpos
	obj.ypos = y
	obj.top = obj.ypos
}

Untuk menggunakan fungsi ini sangatlah mudah — semua yang harus Anda lakukan hanyalah memberitahunya lapisan/objek apa yang digunakan dan lokasi x dan y baru. Contohnya, jika Anda menginisialisasi lapisan Anda dengan:

if (ns4) bujursangkar = document.bujursangkarDiv
if (ie4) bujursangkar = bujursangkarDiv.style
bujursangkar.xpos = parseInt(bujursangkar.left)
bujursangkar.ypos = parseInt(bujursangkar.top)
Maka untuk memindahkan bujursangkar itu ke lokasi baru Anda akan menuliskan:
moveTo(bujursangkar,50,100)

Fungsi moveBy()

Fungsi moveBy bekerja tepat sama tetapi bukan memindahkannya langsung ke lokasi baru tetapi menggeser lapisan dengan jumlah piksel yang diberikan.

function moveBy(obj,x,y) {
	obj.xpos += x
	obj.left = obj.xpos
	obj.ypos += y
	obj.top = obj.ypos
}

Untuk menggeser bujursangkar 5 piksel ke kanan, dan 10 piksel ke atas, dapat Anda tuliskan:

moveBy(bujursangkar,5,-10)

Klik di sini untuk melihat contoh

Halaman Muka Pelajaran Berikutnya: Meluncur
hak cipta 1998 Dan Steinman
Diterjemahkan oleh Mark P. Eliasaputra