HTML draggable Attribute

 

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?
Let us know if you liked the post. That’s the only way we can improve.
Yes0
No0
Powered by Pixelbart

Leave a Comment

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