Teach with us

How to set whether an element is draggable or not in HTML?

Use the draggable attribute to set whether the element is draggable or not. Set it using the values true and false.

Example

You can try to run the following code to implement draggable element and drag an element −

<!DOCTYPE HTML>
<html>
   <head>
      <style>
      .drag {
         float: left;
         width: 100px;
         height: 35px;
         border: 2px dashed #876587;
         margin: 15px;
         padding: 10px;
      }
      </style>
   </head>
   <body>
      <div class="drag" ondrop = "drop(event)" ondragover = "dropNow(event)">
         <p ondragstart = "dragStart(event)" ondrag = "draggingNow(event)"
         draggable = "true" id = "dragtarget">Drag!</p>
      </div>
      <div class = "drag" ondrop="drop(event)" ondragover = "dropNow(event)"></div>
      <div id = "box"> </div>
      <p>Drag the left box to the right or drag the right box to the left.</p>
      <script>
         function dragStart(event) {
            event.dataTransfer.setData("Text", event.target.id);
         }
         function draggingNow(event) {
            document.getElementById("box").innerHTML = "Dragged successfully!";
         }
         function dropNow(event) {
            event.preventDefault();
         }
         function drop(event) {
            event.preventDefault();
            var data = event.dataTransfer.getData("Text");
            event.target.appendChild(document.getElementById(data));
            document.getElementById("box").innerHTML =
            "The element dropped successfully!";
         }
      </script>
   </body>
</html>
Updated on 03-Mar-2020 05:32:47

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements