ড্র্যাগ অ্যান্ড ড্রপ (DnD) একটি শক্তিশালী ইউজার ইন্টারফেস কনসেপ্ট যা মাউস ক্লিকের সাহায্যে আইটেম কপি, রি-অর্ডার এবং ডিলিট করা সহজ করে তোলে। এটি ব্যবহারকারীকে একটি এলিমেন্টের ওপর মাউস বাটন ক্লিক করে ধরে রাখতে, অন্য লোকেশনে টেনে আনতে, এবং মাউস বাটন রিলিজ করে সেখানে ড্রপ করতে দেয়।
পারাম্পরিক HTML4-এ ড্র্যাগ অ্যান্ড ড্রপ ফাংশনালিটি পেতে ডেভেলপাররা জটিল জাভাস্ক্রিপ্ট প্রোগ্রামিং বা jQuery-এর মতো ফ্রেমওয়ার্ক ব্যবহার করত।
HTML5 একটি নেটিভ Drag and Drop (DnD) API নিয়ে এসেছে যা ব্রাউজারে নিজস্ব DnD সাপোর্ট যোগ করে, ফলে কোডিং অনেক সহজ হয়েছে।
ড্র্যাগ অ্যান্ড ড্রপ বাস্তবায়ন পদ্ধতি
ড্র্যাগ অ্যান্ড ড্রপ বাস্তবায়ন করতে দুই ধাপ অনুসরণ করতে হয়।
ধাপ ১ — অবজেক্টকে ড্র্যাগেবল (draggable) করা
HTML5-এ ড্র্যাগ অ্যান্ড ড্রপ বাস্তবায়ন করতে প্রথমে অবজেক্টকে ড্র্যাগেবল করতে হয়।
যদি আপনি কোনো এলিমেন্ট ড্র্যাগ করতে চান, তবে সেই এলিমেন্টের জন্য draggable অ্যাট্রিবিউটকে true সেট করুন। dragstart ইভেন্ট লিসেনার সেট করুন যা ড্র্যাগ করা ডেটা সংরক্ষণ করবে। dragstart ইভেন্ট লিসেনার অনুমোদিত ইফেক্টগুলো (copy, move, link, বা কম্বিনেশন) সেট করবে।
উদাহরণ
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#boxA, #boxB {
float:left; padding:10px; margin:10px; -moz-user-select:none;
}
#boxA { background-color: #50B948; width:75px; height:75px; }
#boxB { background-color: #0000FF; width:150px; height:150px; }
</style>
<script type="text/javascript">
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 in HTML5</h2>
<div>Try to drag the green 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>
ধাপ ২ — অবজেক্ট ড্রপ করা
একটি ড্রপ приняত করতে, ড্রপ টার্গেটকে কমপক্ষে তিনটি ইভেন্ট লিসেন করতে হয়।
dragenterইভেন্ট — ড্রপ টার্গেট ড্রপ গ্রহণ করবে কিনা তা নির্ধারণ করে। ড্রপ গ্রহণ করা হলে এই ইভেন্ট ক্যানسেল করতে হয়।dragoverইভেন্ট — ব্যবহারকারীকে কী ফিডব্যাক দেখানো হবে তা নির্ধারণ করে।dropইভেন্ট — ড্রপ সম্পন্ন হলে ডেটা প্রসেস করে।
উদাহরণ
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#boxA, #boxB {
float:left; padding:10px; margin:10px; -moz-user-select:none;
}
#boxA { background-color: #50B948; width:75px; height:75px; }
#boxB { background-color: #0000FF; width:150px; height:150px; }
</style>
<script type="text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target, 0, 0);
return true;
}
function dragEnter(ev) {
event.preventDefault();
return true;
}
function dragOver(ev) {
return false;
}
function dragDrop(ev) {
var src = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(src));
ev.stopPropagation();
return false;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop in HTML5</h2>
<div>Try to move the green box into the blue box.</div>
<div id="boxA" draggable="true" ondragstart="return dragStart(ev)">
<p>Drag Me</p>
</div>
<div id="boxB" ondragenter="return dragEnter(ev)" ondrop="return dragDrop(ev)" ondragover="return dragOver(ev)">Dustbin</div>
</center>
</body>
</html>
