HTML draggable Attribute

 Night Mode  Light Mode

 

Definition and Usage

The draggable attribute is a global attribute. This attribute is new in HTML5. Means, this attribute does not work in the previous versions of HTML.
It allows the user to drag the element content to specific place.

Values :

  1. true : value reveals to user, that element can be dragged.
  2. false : value reveals to user, that element cannot be dragged.

Example :

<div id="firstDiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<p id="dragMe" draggable="true" ondragstart="drag(event)">Drag me into rectangle.</p>

<style>

#firstDiv {
width: 200px;
height: 40px;
padding: 10px;
border: 2px solid #000;
}

</style>
<script>

function allowDrop(ev) {
ev.preventDefault();
}

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

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

</script>
Result

Drag me into rectangle.

 

Here are a few tutorials for you to read next:

If you find this tutorial helpful, then please Subscribe to our YouTube Channel for video tutorials, and share this article on social media.

Was this post helpful?

Leave a Comment

Your email address will not be published. Required fields are marked *