HTML - Global draggable Attribute

The draggable is an HTML global attribute that is used to specify whether an element is draggable or not.

If this attribute is not set, its value is auto, which means drag behavior is the default browser behavior. Only links and images are by default draggable.

For other elements, we have to use the draggable attribute, and the draggable attribute is often used in the drag and drop operation.

This attribute can have the following values −

  • true − the element can be dragged.

  • false − the element cannot be dragged.

Syntax

Following is the syntax of the draggable attribute −

<element draggable = "true | false" >

Example

In the example below, we're creating an HTML document and using the draggable attribute in order to help the JavaScript function in dragging and dropping the paragraph element, as follows−

<!DOCTYPE html>
<html>
<head>
   <style>
      #div {
         width: 300px;
         height: 50px;
         padding: 12px;
         border: 2px solid gray;
      }
   </style>
</head>
<body>
   <div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <br>
   <p id="drag" draggable="true" ondragstart="drag(event)">This is a draggable paragraph. Drag this element into the rectangle box.</p>
   <script>
      function allowDrop(ev) {
         ev.preventDefault();
      }

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

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

When we execute the above script, it will generate an outptyu consisting of the text along with a div box on the webpage. when the user tries to drag the text and drop in the div box the eent gets triggered.

Example

Considering the another example, Where we are going to use the draggable attribute

<!DOCTYPE html>
<html>
<head>
   <style>
      #div {
         width: 350px;
         height: 70px;
         padding: 12px;
         border: 4px solid green;
      }

      h2 {
         color: green;
         border: 4px solid green;
         background-color: purble;
         margin: 20px;
      }

      span {
         color: black;
      }
   </style>
</head>
<body>
   <div id="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <br>
   <h2 id="drag" draggable="true" ondragstart="drag(event)">tutorials <span>point</span>
   </h2>
   <p draggable="true">Easy to learn!</p>
   <script>
      function allowDrop(ev) {
         ev.preventDefault();
      }

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

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

On executing the above script, the output window will pop up displaying the text along with a div box on the webpage. when the user tries to drag and drop in the div box the event gets triggered.

html_attributes_reference.htm
Advertisements