The ondragend
attribute event is triggered
when finishing 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 ondragend
attribute is new in HTML5.
<element ondragend="script">
ALL HTML elements
ondragend |
Yes | 9.0 | Yes | Yes | Yes |
<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {<!-- w w w . ja v a2 s.c o 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"
ondragend="dragEnd(event)"
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 dragEnd(event) {
console.log("Finished dragging.");
}
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>