Drag and Drop is one of the useful Html5 feature using which you can drag and drop html elements.One simple example is Gmail’s drag and drop attachment upload.
In this tutorial we will explain the html5 drag drop using a simple example.
Images and hyperlink elements are draggable by default in modern browsers.[see w3c]
you can make the element draggable by setting the attribute draggable=”true”
You can even drag this line too.
Drop action:
Items which are dragged needs to be dropped only on certain html elements.Those which are droppable are indicated with the mouse pointer.
For each drag and drop action the following events occur sequentially.
- dragstart
- drag
- dragenter
- dragleave
- dragover
- drop
- dragend
To test this sequence we can see this example.Drag a colored box in the left side and drop over the right side box.We can use java script to pass the color of the box in the left side to the right and then set the color as css background.
Step 1: Check Browser compatibility
Not all the browsers support drag and drop functionality.You can check the compatibility using java script.
1 2 3 4 5 | function checkdnd() { if (!'draggable' in document.createElement('span')) { alert("Drag Drop not supported in your browser"); } } |
Step 2: Create a draggable div
Yellow
1 2 3 | <div style="width: 100px; float: left;"> <div class="color1">Yellow</div> </div> |
Now we have created a simple div element that can be dragged.We can drop this over another div to pass the information.In this case we will pass the ‘id’
Step 3: Override the default drop action
1 | e.preventDefault(); |
This will prevent the default action of the element.This will be useful in case for hyperlinks.
Step 4: Send the data while drag occurs
The dragged element’s id is sent using the datatransfer.setdata function.
1 2 3 | function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } |
Step 5 : Pass the data while drop event occurs
1 2 3 4 5 | function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); document.getElementById("dp").style.backgroundColor=data; } |
Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | < !DOCTYPE HTML> <html> <head> <style> div.color1 { background-color:yellow; height:50px; width:50px; border: solid 8px #999; cursor:move; } div.color2 { background-color:blue; height:50px; width:50px; border: solid 8px #999; cursor:move; } div.color3 { background-color:green; height:50px; width:50px; border: solid 8px #999; cursor:move; } div.color4 { background-color:red; height:50px; width:50px; border: solid 8px #999; cursor:move; } div.dropbox{ height:250px; width:200px; border: solid 8px #999; overflow:hidden; } </style> <script type="text/Javascript"> function checkdnd() { if (!'draggable' in document.createElement('span')) { alert("Drag Drop not supported in your browser"); } } function permitdrop(e) { e.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); document.getElementById("dp").style.backgroundColor=data; } </script> </head> <body onload="checkdnd()"> <div style="width:100px;float:left"> <div class="color1" draggable="true" ondragstart="drag(event)" id="yellow">Yellow</div> <div class="color2" draggable="true" id="blue"ondragstart="drag(event)">Blue</div> <div class="color3" draggable="true" id="green" ondragstart="drag(event)">Green</div> <div class="color4" draggable="true" id="red" ondragstart="drag(event)">Red</div> </div> <div class="dropbox" ondragover="permitdrop(event)" ondrop="drop(event)" id="dp"> drop here </div> </body> </html> |
References:
