Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Drag and Drop feature using HTML5

HTML:


<!-- ondrop event: When the dragged data is dropped, a drop event occurs -->
<div id="div1"
style="width: 300px; height: 300px; padding: 10px; border: 1px solid #FF4500;"
ondragover="allowDrop(event)"
ondrop="drop(event)"
draggable = "false">
</div>

<!--ondragstart = Specify what should happen when the element is dragged -->
<img
id="drag1" src="HTML5.jpg"
draggable="true"
ondragstart="drag(event)"
width="204" height="204" />

</div>


Script:
  function drag(event)
{
// set the target element
event.dataTransfer.setData("ControlID", event.target.id);
}

function allowDrop(event)
{
//To allow a drop, we must prevent the default handling of the element
event.preventDefault();
}

function drop(event)
{

//To allow a drop, we must prevent the default handling of the element
event.preventDefault();

// append drag element in to drop area
var controlId = event.dataTransfer.getData("ControlID");
event.target.appendChild(document.getElementById(controlId));
}


Note: 
ondragover event: It specifies where the dragged data can be dropped. ondrop event: When the dragged data is dropped, a drop event occurs. ondragstart = It specify what should happen when the element is dragged. event.preventDefault() – Prevent default behavior of an element.


This post first appeared on PSD-HTML-CSS-JS, please read the originial post: here

Share the post

Drag and Drop feature using HTML5

×

Subscribe to Psd-html-css-js

Get updates delivered right to your inbox!

Thank you for your subscription

×