<p ondragstart="dragStart(event)" > - Javascript DOM Event

Javascript examples for DOM Event:ondragstart

  1. HOME
  2. Javascript
  3. DOM Event
  4. ondragstart

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  w w w .  j  a v a2 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)" ondragend="dragEnd(event)" draggable="true" id="dragtarget">Drag me!</p>
</div>

<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<p 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();
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
}
</script>

</body>
</html>

Related Tutorials