Dragging and dropping can enable users to drag an object from one destination point and drop it to different location into the same webpage. This is a very instinctive way for users to interact with your webpage.
Where we have to use Drag and Drop Elements:-
1.It can be used for moving email messages to the folder.
2.For playing card and matches the puzzel pieces to its place.
3.Rearranging elements into a list.
For using drag and drop functionality we need to use jQuery library and the jQuery UI plugin. It includes all sorts and useful user interface widgets and several effects. Use below links to your editor in the head section.
<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
...
</head>
Now below is the Source code that will explain the concept of drag and drop in a brief manner.
Firstly we use ev.preventDefault(): function:-
This function will allow a dropping element because by default element cannot be dropped to the another place so we have to used this function for calling the event.preventDefault() methods for ondragable events. While ev.dataTransfer.setData("text", ev.target.id); is used for setting the data type and the value of the element which is going to be draggable to the container.
At last we use ev.target.appendChild(document.getElementById(data)); These line of code will append the dragged elements into the container
Code:-
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
float: left;
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 1px solid black;
background-color: rgb(181,205,75);
}
h2{color: red}
</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>
<h2>Using HTML5 Drag and Drop property</h2>
<p>Drag the image between the two div container</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRENl2CJuu63bN-maaJ4l4hiIGuXSzWyRECXr2eDGGa-i37HbnNYg" draggable="true" ondragstart="drag(event)" id="drag1" width="100" height="100">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
Output:-
For seeing output just go through the below link.
0 Comment(s)