Javascript DOM ondragstart Event

Introduction

Execute a JavaScript when the user starts to drag a <p> element:

Drag the p element back and forth between the two rectangles:

View in separate window 

<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {//www .  ja va 2  s .co  m
  float: left;
  width: 100px;
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</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>

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

To make an element draggable, use the global HTML5 draggable attribute.

Links and images are draggable by default, and do not need the draggable attribute.

Bubbles: Yes
Cancelable: Yes
Event type: DragEvent
Supported HTML tags: All HTML elements



PreviousNext

Related