Drag and Drop is a common feature that we tend to see in a number of websites, for example, we tend to drag and drop a product into the buying bucket on an e-commerce site or we have seen how we can drag a file and drop it into the Facebook's What's in your mind area to upload a file, so yes if you need this drag and drop feature into your website, you can easily implement it using the HTML5. Drag and Drop is a very common feature we can say where we simply grab an object and drop it in some different location inside the viewport.
 |
| Source: Google Images |
In HTML5 drag and drop is a part of the standard and every element is draggable here.All the common browsers support this HTML5 API, Google Chrome from version 4.0, Internet Explorer from version 9.0, Mozilla FireFox from version 3.5, Safari from 6.0 and Opera from version 12.0.
Here is a very simple code snippet of dragging an image into a div:
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 100px;
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));
document.getElementById("para1").innerHTML="Data is Dropped";
document.getElementById("para1").innerHTML="Data is Dropped";
}
</script>
</head>
<body>
<p id="para1">Drag the respective Image into this rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="myimage" src="images/bg-08.jpg" draggable="true" ondragstart="drag(event)" width="350" height="80">
</body>
</html>
Code Explanation:
- First of all, we have to decide what item we want to drag, in this example, I am dragging an image, so in order to make it draggable we have to use a predefined attribute "draggable" which we need to set to "true".
- Now we have to define a method that will be called on an event called, ondragstart, see here I am calling drag(event) on the given event and here we need to call a method named setData with dataTransfer Object, dataTransfer.setData() method sets the data type and the value of the dragged data.
- The ondragover event specifies where the dragged data can be dropped.By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element. This is done by calling the event.preventDefault() method for the ondragover event.
- When the dragged data is dropped, a drop event occurs. In the example above, the ondrop attribute calls a function, drop(event), where the getData method is used which is getting the data based on the datatype "text" and then we are appending the child using the appendChild property to our div.
Screenshots:
 |
| BEFORE DROP |
 |
| Once Data is Dropped into the Div |
That's all in this article, I Hope I have given something new to you guys to play with.
No comments:
Post a Comment
Thanks for Your Time!