HTML5-এ ড্র্যাগ এবং ড্রপ (Drag and Drop) ইন্টারঅ্যাকশন তৈরি করা সম্ভব, যা ব্যবহারকারীদের উপাদান বা আইটেমগুলিকে একটি এলিমেন্ট থেকে অন্য এলিমেন্টে সরানোর অনুমতি দেয়। এই ইন্টারঅ্যাকশনটি বিভিন্ন ধরনের ইউজার ইন্টারফেস অ্যাপ্লিকেশন তৈরি করতে সহায়ক হতে পারে, যেমন: ফাইল আপলোড, লিস্ট অর্ডার পরিবর্তন, ইত্যাদি।
HTML5 ড্র্যাগ এবং ড্রপ API (Application Programming Interface) ব্যবহার করে, আপনি ওয়েব পেজে ড্র্যাগেবল উপাদান তৈরি করতে পারেন এবং সেগুলি নির্দিষ্ট গন্তব্যে ড্রপ করতে পারেন।
১. ড্র্যাগ এবং ড্রপ API এর মূল উপাদান
HTML5 ড্র্যাগ এবং ড্রপ API তিনটি মূল উপাদানকে অন্তর্ভুক্ত করে:
- draggable অ্যাট্রিবিউট: এটি উপাদানকে ড্র্যাগযোগ্য করতে ব্যবহৃত হয়।
- dragstart ইভেন্ট: ড্র্যাগের প্রক্রিয়া শুরু হওয়ার সময় এটি ট্রিগার হয়।
- dragover ইভেন্ট: ড্র্যাগড উপাদান যখন লক্ষ্য স্থানে আসে, তখন এটি ট্রিগার হয়।
- drop ইভেন্ট: ড্র্যাগড উপাদান যখন লক্ষ্য স্থানে ড্রপ হয়, তখন এটি ট্রিগার হয়।
- dragend ইভেন্ট: ড্র্যাগ প্রক্রিয়া সম্পন্ন হওয়ার পর এটি ট্রিগার হয়।
২. ড্র্যাগ এবং ড্রপ কার্যকারিতা তৈরি করার জন্য কোড উদাহরণ
এখানে একটি সাধারণ উদাহরণ দেওয়া হলো, যেখানে একটি ড্র্যাগযোগ্য উপাদান একটি নির্দিষ্ট এলাকায় ড্রপ করা হয়।
HTML:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ড্র্যাগ এবং ড্রপ</title>
<style>
#dragItem {
width: 150px;
height: 150px;
background-color: lightblue;
text-align: center;
line-height: 150px;
margin: 10px;
cursor: move;
}
#dropArea {
width: 300px;
height: 300px;
border: 2px dashed #aaa;
text-align: center;
line-height: 300px;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="dragItem" draggable="true">
ড্র্যাগ করুন
</div>
<div id="dropArea">
এখানে ড্রপ করুন
</div>
<script>
// ড্র্যাগgable এলিমেন্ট
const dragItem = document.getElementById("dragItem");
// ড্রপ এরিয়া
const dropArea = document.getElementById("dropArea");
// ড্র্যাগ শুরু হলে
dragItem.addEventListener("dragstart", function(event) {
// ড্র্যাগ করা আইটেমের তথ্য সেট করা
event.dataTransfer.setData("text", event.target.id);
});
// ড্রপ এরিয়া তে ড্র্যাগড আইটেমের উপর হোভার করলে
dropArea.addEventListener("dragover", function(event) {
// ডিফল্ট আচরণ (যতটুকু সম্ভব) প্রতিরোধ করা
event.preventDefault();
});
// ড্রপ করার পরে
dropArea.addEventListener("drop", function(event) {
event.preventDefault();
// ড্র্যাগড আইটেমের ID পাওয়া
const data = event.dataTransfer.getData("text");
// আইটেমটিকে ড্রপ এরিয়াতে অ্যাপেন্ড করা
const draggedElement = document.getElementById(data);
dropArea.appendChild(draggedElement);
// ড্র্যাগড আইটেমকে নতুন অবস্থানে নিয়ে আসা
draggedElement.style.marginTop = "0";
draggedElement.style.marginLeft = "0";
draggedElement.style.position = "relative";
});
</script>
</body>
</html>
৩. কোড ব্যাখ্যা:
- ড্র্যাগgable উপাদান:
draggable="true"অ্যাট্রিবিউটের মাধ্যমে,#dragItemডিভটি ড্র্যাগযোগ্য করা হয়েছে।
- dragstart ইভেন্ট:
- যখন ড্র্যাগ প্রক্রিয়া শুরু হয়,
dragstartইভেন্ট ট্রিগার হয়। এখানে, আমরাevent.dataTransfer.setData()ব্যবহার করে ড্র্যাগ করা আইটেমের তথ্য সংরক্ষণ করছি (এখানে আইটেমেরid)।
- যখন ড্র্যাগ প্রক্রিয়া শুরু হয়,
- dragover ইভেন্ট:
- যখন ড্র্যাগড আইটেমটি ড্রপ এরিয়াতে চলে আসে, তখন
dragoverইভেন্টটি ট্রিগার হয়। এটিevent.preventDefault()এর মাধ্যমে ডিফল্ট আচরণ (যেমন, ড্রপ করা যাবে না) প্রতিরোধ করে ড্রপ করার অনুমতি দেয়।
- যখন ড্র্যাগড আইটেমটি ড্রপ এরিয়াতে চলে আসে, তখন
- drop ইভেন্ট:
- ড্র্যাগড আইটেমটি ড্রপ এরিয়াতে ড্রপ হলে,
dropইভেন্টটি ট্রিগার হয়। আমরা এখানে ড্র্যাগড আইটেমেরidপুনরুদ্ধার করি এবংdropArea-তে অ্যাপেন্ড করি।
- ড্র্যাগড আইটেমটি ড্রপ এরিয়াতে ড্রপ হলে,
- স্টাইলিং:
#dragItemএবং#dropAreaএর জন্য কিছু প্রাথমিক স্টাইলিং দেওয়া হয়েছে যাতে ড্র্যাগ এবং ড্রপ পরিষ্কারভাবে দেখা যায়।
৪. ড্র্যাগ এবং ড্রপ ব্যবহারের উপকারিতা:
- ইউজার ইন্টারফেসে উন্নতি: ড্র্যাগ এবং ড্রপ ইন্টারঅ্যাকশন ব্যবহারকারীদের জন্য একটি ইন্টারঅ্যাকটিভ এবং সজ্জনযোগ্য অভিজ্ঞতা তৈরি করে, বিশেষ করে ফাইল ম্যানেজমেন্ট, তালিকা অর্ডারিং, ইত্যাদি ক্ষেত্রে।
- রিয়েল-টাইম সিস্টেম: এটি ফাইল আপলোড, চ্যাট বা টাস্ক ম্যানেজমেন্ট অ্যাপ্লিকেশনগুলির মতো সিস্টেমে রিয়েল-টাইম ডেটা আপডেট করার জন্য ব্যবহার করা যেতে পারে।
- অ্যাক্সেসিবিলিটি: ব্যবহারকারীরা সহজেই এলিমেন্টগুলিকে স্থানান্তর করতে পারেন, যা তাদের কাজকে আরও সোজা এবং দ্রুত করে তোলে।
HTML5 এর ড্র্যাগ এবং ড্রপ API একটি শক্তিশালী টুল যা আপনাকে আপনার ওয়েব অ্যাপ্লিকেশনগুলিতে ইন্টারেকটিভ এবং ব্যবহারকারী-বান্ধব ফিচার যোগ করার সুযোগ দেয়। এটি ড্র্যাগেবল উপাদান এবং ড্রপ এরিয়া তৈরি করার মাধ্যমে বিভিন্ন ধরনের অ্যাপ্লিকেশন যেমন ফাইল আপলোড, লিস্ট ম্যানেজমেন্ট, ইত্যাদি তৈরি করতে সহায়ক।
সারাংশ: HTML5 ড্র্যাগ এবং ড্রপ API ব্যবহার করে আপনি ইন্টারেকটিভ ওয়ার্কফ্লো এবং ইউজার ইন্টারফেস ডিজাইন করতে পারেন, যা ব্যবহারকারীদের জন্য সহজ এবং কার্যকরী অভিজ্ঞতা প্রদান করে।
Read more
