Nurul Imam Studio

Belajar HTML, CSS, JavaScript, PHP & MySQL untuk pemula & tingkat lanjut

Jasa Pembuatan Website Profesional

Membuat Objek Bisa Drag & Drop Dengan HTML5

Artikel kali ini akan menjelaskan bagaimana cara membuat html yang berfungsi untuk drag & drop objek. Jadi kita bisa membuat objek itu di drag di posisi yang kita tentukan. Objek yang akan saya contohkan dalam artikel ini adalah gambar. Untuk lebih jelasnya, silahkan lihat demonya dibawah ini.


Silahkan anda drek atau tarik gambar tersebut kedalam kotak. Hasilnya gambar akan berada dalam kotak tersebut. Untuk membuatnya, silahkan ketikkan kode berikut ini.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#element {
   width:280px;
    height:280px;
   margin:10px auto;
   padding:10px;
   border: 1px solid #333;
 border-radius:3px;
}
.tengah {
  text-align: center;
}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="element" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<section class="tengah">
<img id="drag1" src="http://www.nurulimam.com/ink/website-murah.png" draggable="true" ondragstart="drag(event)">
</section>
</body>
</html>

Simpan dan jalankan didalam web browser anda. Artikel selanjutnya, Blog & Note of Nurul Imam akan membahas tentang penggunaan Canvas HTML5 yang sangat menarik. Tunggu kelanjutannya yah :)

16 Comments

  1. Rahasia Hidup SehatReply

    keren juga yah sob, udah saya coba drag gambarnya ke kotak dan gambarnya bisa pindah, makasih buat tutorialnya :)

    • Nurul ImamReply

      Iya sama-sama :)

  2. Index ApkReply

    manteep banget mas,, tutorialnya…uhuyy

    • Nurul ImamReply

      Uhuuuy juga :D

  3. Intan SudibjoReply

    hehe.. memang bisa masuk mas, tapi ko tak bisa keluar lagi ya :D

    • Nurul ImamReply

      Hahahaha emang cuma bisa masuk, klo mau keluar harus bikin tempat 2 buat drag & dropnya

  4. Mizz AizaReply

    ia sesuai untuk buat iklan juga ya?

    • Nurul ImamReply

      Sepertinya contoh diatas memang iklan dari produk saya :D

  5. PakiesReply

    wah keren dan kreatig Kang

    • Nurul ImamReply

      Terimakasih kang :D

  6. RirinReply

    wah keren mas tutorialnya. Sepertinya cocok buat game ya. Misal buat tebak-tebakan gambar :D

    • Nurul ImamReply

      Cocok juga tuh, monggo dibikin mbak script buat tebakan gambarnya :D

  7. AgriReply

    keren mas… ilmu baru lagi.. saya coba modifikasi ya mas. Mana tau bsa buat artikel baru di blog saya :D

    • Nurul ImamReply

      Silahkan mas, siapa tau mas lebih kreatif buat objeknya dengan modifikasi script diatas :D

  8. Fla wallpaperReply

    mantab mas ini bisa buat blog saya lebih optimal karena blog saya berkutat dibidang gambar dan desain.
    terimakasih mas atas tutorialnya

    • Nurul ImamReply

      Trus gambar & wallpapernya mau di drag & drop kemana ?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>