Thursday, November 7, 2013


While you surf on the internet, you find many websites, that contain drap 'n drop feacture like google plus, facebook, and so on, but you don't know how to do it, Today's post will be the answer.

First What is Drag and Drop :D?
Drag and Drop is Grap an object and move it to another location.

how to drop and drag in html5

Why?
Drag and Drop is a cool property that make visitors like your website, and make navigation easier.

An Example:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#fyg-div {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</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>

<p>Drag the image into the rectangle:</p>

<div id="fyg-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="pic.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

Preview Here:

Click Here

I think that the code is not enough clear for you, complete reading to understand.

To Make an image or an element draggable, you have to add the attribut draggable="true".
Like:

<img id="drag1" src="pic.png" draggable="true"  
 width="336" height="69">  

Where to Drop - SetData() and ondragstart

Any Element by default cannot be dropped so in this case, we will callback the ev.preventDefault().
I prefered to create a function that contains this method, to make the source code smaller.
function allowDrop(ev)  
 {  
 ev.preventDefault();  
 }

What to Drag- ondragover

in this case we will create a function which allow to precise what to drag:

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

To Drop - ondrop

function drop(ev)  
 {  
 ev.preventDefault();  
 var data=ev.dataTransfer.getData("Text");  
 ev.target.appendChild(document.getElementById(data));  
 }

How it works?

-Prevent browser default handling. using prevent.default() method.
-Get dragged data with the method dataTransfer.getData("Text"), this will return any data that have the same type in setData().
-Dragged data is the id or the class of the dragged object.
-Append the dragged object in the drop element.

Some ideas about what you can do with drag 'n drop
Create a quiz.

how to make a quiz using drag 'n drop

Upload files:

how to upload files with drag 'n drop

If you have a question please feel free to post a comment below. and if you like our tutorial don't forget to share it.


Follow Us


Categories: ,

10 comments:

  1. Thanks for sharing this useful technique. I love posts like this where you break down a process that can look difficult from the outside but which is actually very do-able for anyone who wants to take the time to follow the steps. I agree the drag and drop is a great way to bring interactivity to a website in a simple and cool-looking way.

    ReplyDelete
  2. Thanks for sharing this useful technique. I love posts like this where you break down a process that can look difficult from the outside but which is actually very do-able for anyone who wants to take the time to follow the steps. I agree the drag and drop is a great way to bring interactivity to a website in a simple and cool-looking way.

    ReplyDelete
  3. thanks for the reply :D

    ReplyDelete
  4. istanbul evden eve nakliyat

    html5 css3 template
    http://www.istanbulevdenevenakliyatiniz.com/

    ReplyDelete
  5. istanbul evden eve nakliyat

    html5 css3 template

    http://www.istanbulevdenevenakliyatiniz.com/umraniye-evden-eve-nakliyat.html

    ReplyDelete
  6. Thank you for the tutorial, I would like to create a html5 drag and drop matching exercise for my students...Lets say I have 5 images and 5 words in foreign language, students should move the words to the right image. I have no clue how to code the matching, could you give me a hint? Thanks in advance :-)

    ReplyDelete
  7. Thank you for this easy to follow tutorial. This seams to be the closest to what I'm looking for. I would like to create a "build your own chocolate box", using drag and drop, but I don't know how to make the pictures to become movable. Could you, please help me with that? Thank you in advance.

    ReplyDelete
  8. Just Add HTML5 Property draggable="true" and then specify where to drop
    If you have some problems contact me on http://foryougeeks.blogspot.com/p/contact-us_10.html

    ReplyDelete
  9. Send a design (picture) of the exercise that you want to realize to me via this link
    http://foryougeeks.blogspot.com/p/contact-us_10.html

    ReplyDelete
  10. Thank you very much. I really appreciate your promptitude!

    ReplyDelete