HTML draggable एट्रिब्यूट

HTML draggable एट्रिब्यूट

HTML DOM draggable एट्रिब्यूट एक बूलियन मान लौटाती/सेट करती है जो निर्दिष्ट करती है कि कोई एलिमेंट ड्रैगेबल है या नहीं।

उदाहरण

आइए HTML draggable एट्रिब्यूट का एक उदाहरण देखें:

<!DOCTYPE html> <html> <head> <title>HTML DOM draggable</title> <style>    * {       padding: 2px;       margin:5px;    }    form {       width:70%;       margin: 0 auto;       text-align: center;    }    fieldset {       min-height: 200px;    }    input[type="button"] {       border-radius: 10px;    }    .options{       display: inline-block;    }    #paulaShare {       width: 200px;       height: 70px;       padding: 10px;       border: 2px solid black;    }    #adamShare {       width: 200px;       height: 70px;       padding: 10px;       border: 2px solid black;    } </style>    <script>       function allowDrop(dragEvent) {          dragEvent.preventDefault();       }       function drag(dragEvent) {          dragEvent.dataTransfer.setData("Text", dragEvent.target.id);       }       function drop(dragEvent) {          var data = dragEvent.dataTransfer.getData("Text");          dragEvent.target.appendChild(document.getElementById(data));          dragEvent.preventDefault();       }    </script> </head> <body>    <form>         <fieldset>          <legend>HTML-DOM-draggable</legend>          <div class="options" id="paulaShare" ondrop="drop(event)"          ondragover="allowDrop(event)">Paula's Share</div><br>          <div class="options">          <p id="optionOne" draggable="true" ondragstart="drag(event)">3/8</p>          <p id="optionTwo" draggable="true" ondragstart="drag(event)">5/8</p>          </div><br>          <div class="options" id="adamShare" ondrop="drop(event)"          ondragover="allowDrop(event)">Adam's Share</div>          <div id="display">Distribute 8 pizza slices between Adam and Paula in ration 3:5</div> </body> </html>

आउटपुट

उत्तर ड्रैग करने से पहले:

उत्तर ड्रैग करने के बाद: