
Ini adalah contoh codingan2 ajax yang simpel banget buat ngedrag tag div terserah mau ngedrag apaan aja tapi ini enak banget lho di drag ...
kemarin2 sih iseng2 nyari kesana-kesini dapat banyak yang jquery dan ajax
semakin iseng ini gara2 kemarin pergi ke gramedia IP [ada diskon lho 30%] lihat2 buku keren ada buku mastering ajax dan php tapi kok mahal banget dan gw baca2 di gramed =)
gw bacanya ringan sih mudah dibaca pengen beli itung2 nambah ilmu tapi mikir lagi materinya kan banyak di internet tapi kan abdul kadir enak dibaca bukunya... tapi kan sayang duitnya ,,, tapi kan bagus nambah ilmu ya buat mempermudah pengerjaan web lah halah...
jadi milih2 deh antara ngeluarin duit Rp 80.000 [ belum diskon =) ] ato lebih rajin nyortir frame dan belajar ajax dari ebook di
flazx.com or
gigapedia.org or
google.com or
betah.co.il
(yang terakhir ini bahasa ibrani jadi search dulu di google pake"site:'betah.co.il' katakunci ")
jadilah sekarang lebih rajin nyari di google dan mencoba fokus ke bahasan web dan IT lainnya =)
ini salah satu contoh yang aku dapat ada dragable dan dropable juga lho....
kalo pake script.aculo.us,mooTools maupun jquery suka bentrok kan nah kalo yang ini murni ajax ga pake plugin lagi hoki banget aku dapat nih ...
langsung copas aja gan.. mantap... karna ga tau kenapa ga bisa masuk sini codingannya aku upload
disini contoh yang terbukti berhasil
sumbernya dari sini nih
http://www.learn-ajax-tutorial.com/DragAndDrop.cfm
comot disana aja ya scriptnya dari sini kok ga bisa masukin codingan html sih...
lihat deh kelebihan script ini tuh ternyata pake kelas standarnya javascript lho...
if (Dragging)
{
DragDiv.style.left = e.clientX + "px";
DragDiv.style.top = e.clientY + "px";
}
nah disitu gan kalo variabel draggingnya true langsung bisa di drag
tag div yang namanya dragdiv... =)
haha moga membantu gan....
kalo mau klik aja link sumbernya disitu masih ada penjelasannya kalo mau pake script.aculo.us
#DragDiv { height:100px; width:100px; background-color:blue; position:relative; } var DragDiv; var Dragging = false; window.onload = function() { DragDiv = document.getElementById("DragDiv"); DragDiv.onmousedown = function() { Dragging = true; } } document.onmousemove = function(e) { if (!e) e = window.event; if (Dragging) { DragDiv.style.left = e.clientX + "px"; DragDiv.style.top = e.clientY + "px"; } } document.onmouseup = function() { Dragging = false; }
Tidak ada komentar:
Posting Komentar