Home > HTML5 > Drag and Drop in HTML5

Drag and Drop in HTML5

Yo ketemu lagi sama gue di materi html5, kali ini saya akan memberikan tutorial html5 drag n drop (tarik dan taruh), tutorial ini bisa dilihat secara lengkap di www.w3schools.com, hehhe ini tutorial bagi yang sudah agak ngerti dengan javascript, tuk itu lain kali saya akan coba menulis tutorial tentang javascript dan css3 tentunya hehe langsung saja ya

<!DOCTYPE html>
<html>
<head>
<title>Html5 Drag Drop</title>
<style type=”text/css”>
.container{
position:relatif;
float:left;
width:60px;
height:60px;
}

.container:hover{
cursor:move;
opacity:0.4;
}

.over{
border:1px dashed #ccc;
}

.drag {
-khtml-user-drag: element; /*ini untuk safari, safari tidak mendukung draggable=”true”*/
}

/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
</style>
<script src=”html5utils.js”></script>
</head>
<body>
<!–html5 pakai draggable=”true”
element apa saja yang memakai draggable=”true”
maka dapat didrag
–>
<h2>Html5 Drag Drop</h2>
<div class=”container drag” draggable=”true”><img src=”images_folder/user_1.png”/> </div>
<div class=”container drag” draggable=”true”><img src=”images_folder/user_2.png”/> </div>
<div class=”container drag” draggable=”true”><img src=”images_folder/user_3.png”/> </div>
<script>

…..

var dragItems = document.querySelectorAll(‘[draggable=true]’);
for (var i = 0; i < dragItems.length; i++) {
addEvent(dragItems[i], ‘dragstart’, handleDragStart);
addEvent(dragItems[i], ‘dragenter’, handleDragEnter);
addEvent(dragItems[i], ‘dragover’, handleDragOver);
addEvent(dragItems[i], ‘dragleave’, handleDragLeave);
addEvent(dragItems[i], ‘drop’, handleDrop);
addEvent(dragItems[i], ‘dragend’, handleDragEnd);
}
//alert(dragItems.length);
</script>
</body>
</html>

maka screenshootnya akan seperti ini

lalu ini adalah outputnya setelah di drag

kalau mau download sourcenya klik disini saja

Categories: HTML5
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: