HTML5-এ জাভাস্ক্রিপ্ট ফাইল ড্রপ

ড্র্যাগ অ্যান্ড ড্রপ (DnD) একটি শক্তিশালী ইউজার ইন্টারফেস কনসেপ্ট যা মাউস ক্লিকের সাহায্যে আইটেম কপি, রি-অর্ডার এবং ডিলিট করা সহজ করে তোলে। এটি ব্যবহারকারীকে একটি এলিমেন্টের ওপর মাউস বাটন ধরে রাখতে, অন্য লোকেশনে টেনে আনতে, এবং মাউস বাটন রিলিজ করে সেখানে ড্রপ করতে দেয়।

ড্র্যাগ অ্যান্ড ড্রপের উদাহরণ:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      #boxA, #boxB {float:left;padding:10px;margin:10px; -moz-user-select:none;}
      #boxA { background-color: #6633FF; width:75px; height:75px; }
      #boxB { background-color: #FF6699; width:150px; height:150px; }
    </style>
    <script>
      function dragStart(ev) {
        ev.dataTransfer.effectAllowed='move';
        ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
        ev.dataTransfer.setDragImage(ev.target,0,0);
        return true;
      }
    </script>
  </head>
  <body>
    <center>
      <h2>Drag and drop HTML5 demo</h2>
      <div>Try to drag the purple box around.</div>
      <div id="boxA" draggable="true" ondragstart="return dragStart(ev)">
        <p>Drag Me</p>
      </div>
      <div id="boxB">Dustbin</div>
    </center>
  </body>
</html>