programplug Logo




HTML Drag and Drop

DnD or Drag and Drop is a feature of HTML5.This feature allows the user to drag and drop an element to another location.The drop location may be consits in different application.If you want to drop the element,just release the mouse button over there.


Events for Drag and Drop feature:
Event DESCRIPTION
Drag It moves every time when the mouse is moved to the object in which it is dragged.
Dragstart It is a intial stage. It work when the user starts dragging an object.
Dragenter It run when the user moves his/her cursor over a target element.
Dragover This event run when the mouse moves over an element.
Dragleave This event is run when the user mouse leaves an element.
Drop It work at the end of the drag operation.
Dragend It run when user release the mouse button to htew completion of drag operation.

See the example below:

<!DOCTYPE html>
<html>
<head>
<style>
#div2
{
width: 400px;
    height: 80px;
    padding: 90px;
    border: 2px 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 programplug into the rectangle:</p>
<div="div2" ondrop="drop(event)" dragover="allowDrop(event)"></div>o
<br>
<img id="drag1" src="../image/im2.PNG" draggable="true" ondragstart="drag(event)" width="340" height="70"> 
</body>
</html>
		  
Output:

Drag the programplug image into the rectangle:









Our Services

Developing Cheapest Websites
Offer Digital Marketing
Provide College Projects
Attractive Website Developing
Summer Training,Industrial Training
SCO,SMO

Contact Us

Dehradun Uttarakhand India
www.programplug.com
info@programplug.com
08534019974
Designed By : Mridul Gupta

Other Link

About Us

Contact Us

Disclaimer

Privacy Policy