Drag and Drop 

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

It is when you "grab" an object and drag it to a different location.

In HTML5, drag and drop is part of the standard: any element can be draggable.

Make an Element Draggable

<img draggable="true">

First of all: To make an element draggable, set the draggable attribute to true.

What to Drag - ondragstart and setData()

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}
  • Specify what should happen when the element is dragged.
  • The ondragstart attribute calls a function, that specifies what data to be dragged.
  • The dataTransfer.setData() method sets the data type and the value of the dragged data.

Where to Drop - ondragover

event.preventDefault()
  • The ondragover event specifies where the dragged data can be dropped.
  • By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.
  • This is done by calling the event.preventDefault() method for the ondragover event.

Do the Drop - ondrop

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

//Code explained:

//-Call preventDefault() to prevent the browser default handling of the data 
// (default is open as link on drop)
//-Get the dragged data with the dataTransfer.getData() method. This method
// will return any data that was set to the same type in the setData() method
//-The dragged data is the id of the dragged element ("drag1")
//-Append the dragged element into the drop element

When the dragged data is dropped, a drop event occurs.

Related concepts

→
Drag and Drop
→

Drag and Drop — Structure map

Clickable & Draggable!

Drag and Drop — Related pages:

Introduction

Drag and Drop