The ondragstart
attribute is triggered
when starting to drag 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 ondragstart
attribute is new in HTML5.
<element ondragstart="script or Javascript function name">
ALL HTML elements
ondragstart |
Yes | 9.0 | Yes | Yes | Yes |
<!DOCTYPE HTML>
<html>
<head>
<style>
#droptarget {<!--from ww w.ja v a 2 s.c o m-->
float: left;
width: 200px;
height: 35px;
margin: 55px;
margin-top: 155px;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag me into the rectangle!</p>
<div id="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function allowDrop(event) {
event.preventDefault();
console.log("OVER.");
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
console.log("dropped.");
}
</script>
</body>
</html>