The ondrag
attribute event is triggered
when dragging an element or text selection.
To make an element draggable, mark that element
with the global HTML5 draggable
attribute.
Links and images are draggable by default.
Events fired on the draggable source element:
Events fired on the drop target:
The ondrag
attribute is new in HTML5.
<element ondrag="script">
ALL HTML elements
ondrag |
Yes | 9.0 | Yes | Yes | Yes |
<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {<!-- w ww . jav a 2 s .co m-->
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)"
ondrag="dragging(event)"
draggable="true"
id="dragtarget">Drag me!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dragging(event) {
console.log("being dragged");
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
console.log("dropped");
}
</script>
</body>
</html>