HTML5 में ड्रैगेबल पैराग्राफ कैसे बनाएं?

ड्रैगेबल पैराग्राफ बनाने के लिए draggable एट्रिब्यूट का उपयोग करें। true और false मानों से ड्रैग सक्षम या अक्षम करें।

उदाहरण

draggable एलिमेंट लागू करने और एलिमेंट को ड्रैग करने का कोड:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      .drag {
        float: left;
        width: 100px;
        height: 75px;
        border: 1px 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">This is demo paragraph to be dragged!</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>