The HTML ondrag attribute is an event handler that triggers a script to execute when an element is dragged.
Definition and Usage
➔ The ondrag event fires continuously as long as the user is dragging an element.
➔ The ondrag event fires continuously (approximately every 350 milliseconds) after the ondragstart event and before the ondragend event.
➔ This can be applied to any HTML element, but the element must have draggable="true" set to enable dragging.
Example
<!DOCTYPE HTML>
<html>
<head>
<title>HTML ondrag Attribute Example</title>
<style>
.container-div {
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<h2>HTML ondrag Attribute Example</h2>
<p>Drag and drop the p element into the two rectangles one after the other.</p>
<div class="container-div" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" ondragstart="dragstart(event)" ondrag="dragging(event)" id="dragId">Drag me!</p>
</div>
<div class="container-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p id="msgId"></p>
<script>
//optional, skip to discard event message.
function dragstart(event) {
//set id, of dragged item..
event.dataTransfer.setData("dragItemId", event.target.id);
document.querySelector("#msgId").innerHTML = "";
}
//optional, skip to discard event message.
function dragging(event) {
document.querySelector("#msgId").innerHTML = "The element is being dragged";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
//get id of dragged item..
let dragItemId = event.dataTransfer.getData("dragItemId");
let dragItem =document.getElementById(dragItemId);
event.target.appendChild(dragItem);
document.querySelector("#msgId").innerHTML = "The element is dropped";
}
</script>
</body>
</html>
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| ondrag | All visible elements |
Example
<!DOCTYPE HTML>
<html>
<head>
<title>HTML ondrag Attribute Example</title>
<style>
.container-div {
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<h2>HTML ondrag Attribute Example</h2>
<p>Drag and drop the p element into the two rectangles one after the other.</p>
<div class="container-div" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" id="paragraphId" ondragstart="dragstart(event)" ondrag="dragging(event)">Drag me!</p>
</div>
<div class="container-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p id="msgId"></p>
<script>
//optional, skip to discard event message.
function dragstart(event) {
document.querySelector("#msgId").innerHTML = "";
}
//optional, skip to discard event message.
function dragging(event) {
document.querySelector("#msgId").innerHTML = "The p element is being dragged";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
let dragItem = document.querySelector("#paragraphId");
event.target.appendChild(dragItem);
document.querySelector("#msgId").innerHTML = "The element is dropped";
}
</script>
</body>
</html>
Click on the "copy" button and try this example in your project.
Example
<!DOCTYPE HTML>
<html>
<head>
<title>HTML ondrag Attribute Example</title>
<style>
.container-div {
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<h2>HTML ondrag Attribute Example</h2>
<p>Drag and drop the p element into the two rectangles one after the other.</p>
<div class="container-div" ondrop="drop(event)" ondragover="allowDrop(event)">
<p draggable="true" id="paragraphId">Drag me!</p>
</div>
<div class="container-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p id="msgId"></p>
<script>
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
let dragItem = document.querySelector("#paragraphId");
event.target.appendChild(dragItem);
document.querySelector("#msgId").innerHTML = "The element is dropped";
}
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.
➔ Drag Item and check X,Y coordinate.
Example
<!DOCTYPE HTML>
<html>
<head>
<title>HTML ondrag Attribute Example</title>
<style>
.container-div {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #aaaaaa;
}
.container-div2 {
clear: left;
height: 35px;
margin: 15px;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<div>
Drag Item Position (X, Y) =
<span id='text'></span>
</div>
<h2>HTML ondrag Attribute Example</h2>
<p>Drag and drop the p element into the rectangles one after the other.</p>
<div>
<div class="container-div" ondrop="drop(event)" ondragover="allowDrop(event)">
<span draggable="true" id="paragraphId" ondragstart="dragstart(event)" ondrag="dragging(event)">Drag
me!</span>
</div>
<div class="container-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="container-div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div class="container-div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div>
<p id="msgId"></p>
</div>
<script>
//optional, skip to discard event message.
function dragstart(event) {
document.querySelector("#msgId").innerHTML = "";
}
function dragging(event) {
document.querySelector("#msgId").innerHTML = "The element is being dragged";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
let dragItem = document.querySelector("#paragraphId");
event.target.appendChild(dragItem);
document.querySelector("#msgId").innerHTML = "The element is dropped";
//Get Position
getPositionXY(dragItem)
}
function getPositionXY(element) {
var rect = element.getBoundingClientRect();
document.getElementById('text').innerHTML = '(' + rect.x + ', ' + rect.y + ")";
}
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.