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>

আউটপুট

উত্তরগুলো ড্র্যাগ করার আগে -

উত্তরগুলো ড্র্যাগ করার পর -