Drag and Drop হলো এমন একটি ইন্টারেক্টিভ ফিচার যেখানে ব্যবহারকারী একটি আইটেম (যেমন একটি ফাইল, ছবি, বা অন্য কোনো উপাদান) টেনে নিয়ে অন্য জায়গায় ফেলতে পারে। এই ফিচারটি সাধারণত ব্যবহারকারী ইন্টারফেসে (UI) ইন্টারঅ্যাক্টিভ কার্যক্রমের জন্য ব্যবহৃত হয়। HTML5-এ drag and drop API রয়েছে, তবে আমরা এখানে কাস্টম Drag and Drop তৈরির জন্য CSS এবং JavaScript ব্যবহার করে দেখাবো।
১. Drag and Drop-এর মূল ধারণা
Drag and Drop-এর জন্য দুটি প্রধান উপাদান প্রয়োজন:
- ড্র্যাগ করা উপাদান (Draggable Element): এটি এমন একটি উপাদান হবে যা ব্যবহারকারী টেনে নিয়ে যাবে।
- ড্রপ জোন (Drop Zone): এটি এমন একটি এলাকা হবে যেখানে ড্র্যাগ করা উপাদানটি ফেলা হবে।
২. HTML কন্টেন্ট
এখানে একটি সহজ HTML কাঠামো তৈরি করা হলো, যেখানে আমরা দুটি উপাদান তৈরি করেছি। একটি উপাদান থাকবে যা ড্র্যাগ করা হবে, এবং একটি এলাকা থাকবে যেখানে সেই উপাদানটি ড্রপ করা যাবে।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Custom Drag and Drop</title>
<style>
#dragElement {
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
border: 1px solid #333;
cursor: grab;
}
#dropZone {
width: 200px;
height: 200px;
margin-top: 20px;
border: 2px dashed #ccc;
text-align: center;
line-height: 200px;
color: #888;
}
#dropZone.hover {
background-color: lightyellow;
}
</style>
</head>
<body>
<div id="dragElement" draggable="true">
টেনে নিন
</div>
<div id="dropZone">
এখানে ফেলুন
</div>
<script>
// ড্র্যাগ এলিমেন্ট এবং ড্রপ জোন সিলেক্ট করা
const dragElement = document.getElementById('dragElement');
const dropZone = document.getElementById('dropZone');
// ড্র্যাগ স্টার্ট
dragElement.addEventListener('dragstart', (event) => {
// ড্র্যাগ আইটেমের ডাটা সেট করা
event.dataTransfer.setData('text', event.target.id);
event.target.style.opacity = 0.5; // ড্র্যাগ আইটেমের অপাসিটি কমানো
});
// ড্র্যাগ এনড (ড্র্যাগিং শেষ হলে)
dragElement.addEventListener('dragend', (event) => {
event.target.style.opacity = 1; // অপাসিটি আবার ১ করা
});
// ড্রপ জোনে ড্র্যাগ ওভার ইভেন্ট
dropZone.addEventListener('dragover', (event) => {
event.preventDefault(); // ডিফল্ট আচরণ বন্ধ করা (যেহেতু ড্রপ সম্ভব নয়)
dropZone.classList.add('hover'); // ড্রপ জোনের জন্য স্টাইল যোগ করা
});
// ড্রপ জোনে ড্রপ
dropZone.addEventListener('drop', (event) => {
event.preventDefault();
const data = event.dataTransfer.getData('text'); // ড্র্যাগ করা আইটেমের ডেটা আনা
const draggedElement = document.getElementById(data); // ড্র্যাগ করা আইটেম সিলেক্ট করা
dropZone.appendChild(draggedElement); // ড্র্যাগ করা আইটেমকে ড্রপ জোনে অ্যাপেন্ড করা
dropZone.classList.remove('hover'); // ড্রপ জোনের স্টাইল রিমুভ করা
});
// ড্রপ জোনের বাইরে থেকে ড্র্যাগ হবার সময় স্টাইল পরিবর্তন
dropZone.addEventListener('dragleave', (event) => {
dropZone.classList.remove('hover');
});
</script>
</body>
</html>
৩. কোড ব্যাখ্যা
- HTML:
#dragElementহচ্ছে এমন একটি এলিমেন্ট যেটি ড্র্যাগ করা যাবে, এর জন্যdraggable="true"অ্যাট্রিবিউট ব্যবহার করা হয়েছে।#dropZoneএকটি এলাকা যেখানে ড্র্যাগ করা আইটেমটি ড্রপ হবে। এই এলিমেন্টটি স্টাইলের মাধ্যমে একটি ড্যাশড বর্ডার দিয়ে চিহ্নিত করা হয়েছে।
- CSS:
#dragElement: এই এলিমেন্টের স্টাইল রয়েছে যাতে এটি একটি ব্লক আকারে প্রদর্শিত হয় এবংcursor: grab;স্টাইলটি ব্যবহারকারীকে ড্র্যাগিং ইন্টারঅ্যাকশনের জন্য নির্দেশ দেয়।#dropZone: এটি একটি বড় এলাকা যা ড্রপ জোন হিসেবে কাজ করবে, এবংhoverক্লাস যুক্ত হলে এর ব্যাকগ্রাউন্ডের রঙ পরিবর্তন হবে।
- JavaScript:
dragstart: এই ইভেন্টে আমরা ড্র্যাগ করা আইটেমেরidডেটা হিসেবে সেট করি, যাতে পরে সেটি সহজেই রিটারিভ করা যায়। এছাড়া ড্র্যাগ শুরু হলে আইটেমের অপাসিটি কমিয়ে দেওয়া হয়।dragend: ড্র্যাগ শেষ হলে আইটেমের অপাসিটি আবার স্বাভাবিক অবস্থায় ফিরে আসে।dragover: এই ইভেন্টে ডিফল্ট আচরণ বন্ধ করতে হয়, কারণ ব্রাউজার ডিফল্টভাবে একটি ড্রপ নিষিদ্ধ অবস্থায় রাখে। এছাড়া, ড্রপ জোনে একটি ক্লাস যোগ করা হয় যাতে ইন্টারঅ্যাকশন আরও ভিজ্যুয়াল হয়।drop: এখানে, ড্র্যাগ করা আইটেমের ডেটাgetDataমাধ্যমে রিট্রিভ করা হয় এবং সেটি ড্রপ জোনে অ্যাপেন্ড করা হয়।dragleave: ড্র্যাগ এলিমেন্ট যদি ড্রপ জোনের বাইরে চলে যায়, তাহলেhoverক্লাসটি সরানো হয়।
৪. বৈশিষ্ট্য এবং ব্যবহার
- CSS দিয়ে Customizing:
- আপনি CSS দিয়ে ড্র্যাগ এবং ড্রপ এলিমেন্টগুলোর স্টাইল কাস্টমাইজ করতে পারেন, যেমন তাদের আকার, রঙ, এবং হোভার প্রভাব।
- ড্রপ জোনের ভিজ্যুয়াল ইফেক্ট যেমন
border,background-color, বাopacityপরিবর্তন করে ব্যবহারকারীকে নির্দেশ দিতে পারেন যে এটি একটি ড্রপ জোন।
- JavaScript দিয়ে আরও ফিচার যোগ করা:
- Multiple Items: আপনি যদি একাধিক আইটেম ড্র্যাগ এবং ড্রপ করতে চান, তবে প্রতিটি ড্র্যাগ আইটেমের জন্য আলাদা
idএবংdataTransferব্যবহার করতে হবে। - ব্যবহারকারীকে বার্তা দেওয়া: আপনি যখন আইটেম সফলভাবে ড্রপ করবেন, তখন ব্যবহারকারীকে একটি বার্তা দেখানোর জন্য
alert()বা ডাইনামিক বার্তা প্রদান করতে পারেন। - ড্র্যাগ আইটেমের অবস্থান পরিবর্তন: আপনি ড্র্যাগ করা আইটেমের অবস্থানেও পরিবর্তন আনতে পারেন, যেমন এটি স্ক্রীনে কোথায় অবস্থান করছে, এর সাথেও ইন্টারঅ্যাকশন যুক্ত করা যেতে পারে।
- Multiple Items: আপনি যদি একাধিক আইটেম ড্র্যাগ এবং ড্রপ করতে চান, তবে প্রতিটি ড্র্যাগ আইটেমের জন্য আলাদা
Custom Drag and Drop ইন্টারফেস তৈরি করা CSS এবং JavaScript দিয়ে খুবই সহজ। এখানে দেখানো হয়েছে কিভাবে একটি সিম্পল ড্র্যাগ এবং ড্রপ ফিচার তৈরি করা যায়, যা আপনি আপনার প্রকল্পে কাস্টমাইজ করতে পারেন। CSS ব্যবহার করে আপনি এর ভিজ্যুয়াল প্রভাব তৈরি করতে পারেন, এবং JavaScript দিয়ে ব্যবহারকারীর ইন্টারঅ্যাকশন নিয়ে আরও ডাইনামিক ফিচার যোগ করতে পারেন।
সারাংশ:
- HTML5 drag and drop API ব্যবহার করে কাস্টম ড্র্যাগ এবং ড্রপ ফিচার তৈরি করা যায়।
- CSS দিয়ে UI কাস্টমাইজেশন এবং JavaScript দিয়ে ইন্টারঅ্যাকশনের লজিক তৈরি করা যায়।
Content added By
Read more
