ondragstart = function(event)); - Javascript DOM Event

Javascript examples for DOM Event:Element Event Attribute

  1. HOME
  2. Javascript
  3. DOM Event
  4. Element Event Attribute

Description

The ondragstart event occurs when the user starts to drag an element or text selection.

Summary

Bubbles Yes
Cancelable Yes
Supported HTML tags: All HTML elements

Demo Code

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {/*from   ww w . j ava  2  s.com*/
    float: left;
    width: 100px;
    height: 35px;
    margin: 15px;
    padding: 10px;
    border: 1px solid red;
}
</style>
</head>
<body>

<div class="droptarget">
  <p draggable="true" id="dragtarget">Drag me!</p>
</div>

<div class="droptarget"></div>

<p id="demo"></p>

<script>
document.ondragstart = function(event) {
    event.dataTransfer.setData("Text", event.target.id);
    document.getElementById("demo").innerHTML = "Started to drag the p element.";
};

document.ondragend = function(event) {
    document.getElementById("demo").innerHTML = "Finished dragging the p element.";
};

document.ondragover = function(event) {
    event.preventDefault();
};

document.ondrop = function(event) {
    event.preventDefault();
    if ( event.target.className == "droptarget" ) {
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
};
</script>

</body>
</html>

Related Tutorials