ড্র্যাগ অ্যান্ড ড্রপ (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> 