|
Definition and UsageThe ondragstart attribute fires when the user starts to drag an element or text selection. To learn about Drag and Drop, read our HTML Tutorial on HTML5 Drag and Drop. Tip: Links and images are draggable by default, and do not need the draggable attribute. There are many event attributes that are used, and can occur, in the different stages of a drag and drop operation:
Applies toThe ondragstart attribute is part of the Event Attributes, and can be used on any HTML elements.
Browser SupportThe numbers in the table specify the first browser version that fully supports the event attribute.
|
How to Execute a JavaScript when the user starts to drag a <p> element
P Example. Drag the p element back and forth between the two rectangles:
index.html
Example:
HTML
<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<p>Drag the p element back and forth between the two rectangles:</p>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" ondragend="dragEnd(event)" draggable="true" id="dragtarget">Drag me!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p style="clear:both;" id="demo"></p>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
document.getElementById("demo").innerHTML = "Started to drag the p element";
}
function dragEnd(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element.";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
let data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
Output should be:
| html ondragstart attribute |
| How to Execute a JavaScript when the user starts to drag a <p> element | HTML Attribute |
Read Full: | HTML Attribute |
Type: | Develop |
Category: | Web Tutorial |
Sub Category: | HTML Attribute |
Uploaded by: | Admin |
Views: | 169 |
Reffered: https://www.w3schools.com/tags/att_ondragstart.asp