HTML5 এ drag এবং drop ইভেন্টের মাধ্যমে আপনি পেজের উপাদানগুলিকে ড্র্যাগ (টেনে নেওয়া) এবং ড্রপ (ছেড়ে দেওয়া) করতে পারেন। এই বৈশিষ্ট্যটি ব্যবহার করে আপনি ইন্টারঅ্যাকটিভ, ড্র্যাগ-এন্ড-ড্রপ ইন্টারফেস তৈরি করতে পারবেন, যেমন ফাইল আপলোড, অর্ডার পরিবর্তন, বা গেমে উপাদান সরানো।
HTML5 এর draggable অ্যাট্রিবিউট এবং JavaScript-এর dragstart, dragover, drop ইভেন্টগুলি ব্যবহার করে আপনি এই কার্যক্রমগুলি সম্পাদন করতে পারবেন।
১. Draggable Elements তৈরি করা
প্রথমে, HTML এ একটি উপাদান তৈরি করা হবে যা ড্র্যাগ করা যাবে। HTML5-এ, draggable অ্যাট্রিবিউট ব্যবহার করে কোনও উপাদানকে ড্র্যাগgable (ড্র্যাগ করা সম্ভব) করা যায়।
১.১. Draggable এলিমেন্ট তৈরি করা
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Elements এবং Droppable Zones</title>
<style>
.draggable {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightblue;
text-align: center;
line-height: 100px;
border: 2px solid #000;
cursor: grab;
}
.droppable {
width: 300px;
height: 300px;
margin-top: 50px;
background-color: lightgrey;
border: 2px dashed #000;
position: relative;
}
</style>
</head>
<body>
<div id="drag1" class="draggable" draggable="true">টেনে নিন</div>
<div id="dropZone" class="droppable">এখানে ড্রপ করুন</div>
<script>
// Draggable element
const draggable = document.getElementById('drag1');
const dropZone = document.getElementById('dropZone');
// Draggable element শুরু করা
draggable.addEventListener('dragstart', function(event) {
// Dragging শুরু হওয়া অবস্থায় dataTransfer ব্যবহার করা হয়
event.dataTransfer.setData('text', event.target.id);
});
// Droppable zone এর ওপর dragover ইভেন্ট হ্যান্ডলার
dropZone.addEventListener('dragover', function(event) {
// Default action ব্লক করা
event.preventDefault();
});
// Droppable zone এ drop ইভেন্ট হ্যান্ডলার
dropZone.addEventListener('drop', function(event) {
event.preventDefault();
const data = event.dataTransfer.getData('text');
const draggableElement = document.getElementById(data);
dropZone.appendChild(draggableElement); // ড্র্যাগ করা এলিমেন্ট ড্রপ জোনে যুক্ত হবে
});
</script>
</body>
</html>
ব্যাখ্যা:
- Draggable এলিমেন্ট:
draggable="true"অ্যাট্রিবিউট দিয়ে আমরা একটিdivতৈরি করেছি, যা ড্র্যাগ করা যাবে। - Dragstart ইভেন্ট: যখন ব্যবহারকারী ড্র্যাগ শুরু করেন, তখন
dragstartইভেন্ট ট্রিগার হয়। এখানেevent.dataTransfer.setData()ব্যবহার করে ড্র্যাগ করা উপাদানের তথ্য সেট করা হয়। - Dragover ইভেন্ট: এটি ড্রপ জোনের উপর ড্র্যাগ করা উপাদানটি মুভ করার সময় হ্যান্ডেল করা হয়।
event.preventDefault()ব্যবহার করে ডিফল্ট আচরণ ব্লক করা হয়, যাতে ড্রপ করার অনুমতি দেওয়া হয়। - Drop ইভেন্ট: ড্র্যাগ করা উপাদানটি ড্রপ জোনে ড্রপ করার সময়
dropইভেন্ট কার্যকর হয় এবংevent.dataTransfer.getData()দিয়ে ড্র্যাগ করা উপাদানটি পুনরুদ্ধার করে সেটি ড্রপ জোনে যুক্ত করা হয়।
২. Droppable Zones তৈরি করা
ড্র্যাগ করা উপাদানগুলো এক বা একাধিক ড্রপ জোনে ড্রপ করা যাবে। এই ড্রপ জোনগুলো সাধারণত কোন নির্দিষ্ট এলাকা বা জায়গা হতে পারে যেখানে ড্র্যাগ করা উপাদানটি রাখার জন্য অনুমতি দেওয়া হয়।
২.১. Droppable Zone তৈরি করা
<div id="drag1" class="draggable" draggable="true">টেনে নিন</div>
<div id="dropZone1" class="droppable">জোন ১</div>
<div id="dropZone2" class="droppable">জোন ২</div>
এখানে দুটি আলাদা ড্রপ জোন তৈরি করা হয়েছে (dropZone1 এবং dropZone2)। ড্র্যাগ করা উপাদান যেকোনো একটি জোনে ড্রপ করা যেতে পারে।
২.২. একাধিক Droppable Zone নিয়ে কাজ করা
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Droppable Zones</title>
<style>
.draggable {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightblue;
text-align: center;
line-height: 100px;
border: 2px solid #000;
cursor: grab;
}
.droppable {
width: 300px;
height: 300px;
margin-top: 50px;
background-color: lightgrey;
border: 2px dashed #000;
position: relative;
display: inline-block;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="drag1" class="draggable" draggable="true">টেনে নিন</div>
<div id="dropZone1" class="droppable">জোন ১</div>
<div id="dropZone2" class="droppable">জোন ২</div>
<script>
// Draggable element
const draggable = document.getElementById('drag1');
const dropZones = document.querySelectorAll('.droppable');
// Draggable element শুরু করা
draggable.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', event.target.id);
});
// প্রতিটি Droppable Zone এর জন্য dragover এবং drop ইভেন্ট হ্যান্ডলার
dropZones.forEach(dropZone => {
dropZone.addEventListener('dragover', function(event) {
event.preventDefault();
});
dropZone.addEventListener('drop', function(event) {
event.preventDefault();
const data = event.dataTransfer.getData('text');
const draggableElement = document.getElementById(data);
dropZone.appendChild(draggableElement);
});
});
</script>
</body>
</html>
ব্যাখ্যা:
- একাধিক Droppable Zones: আমরা দুটি
droppableএলিমেন্ট তৈরি করেছি, যেখানেdraggableএলিমেন্টটি ড্রপ করা যেতে পারে। - একই কোডের মাধ্যমে একাধিক ড্রপ জোনে ড্র্যাগ করা উপাদানটি ড্রপ করা:
querySelectorAll('.droppable')ব্যবহার করে সমস্ত ড্রপ জোন নির্বাচন করা হয়েছে এবং তাদের উপরdragoverএবংdropইভেন্ট হ্যান্ডলিং করা হয়েছে।
৩. অতিরিক্ত কাস্টমাইজেশন
- স্টাইলিং: ড্র্যাগ করা এবং ড্রপ করা এলিমেন্টগুলির স্টাইল পরিবর্তন করা যেতে পারে, যেমন ড্র্যাগ করা হলে উপাদানটি আলাদা রঙে দেখানো বা ড্রপ জোনের হাইলাইট করা।
- ফাইল আপলোড: আপনি ড্র্যাগ করে ফাইল ড্রপ করার জন্য ফাইল আপলোডের ব্যবস্থা করতে পারেন, যা সাধারণত একটি
input[type="file"]ফিচারের বিকল্প হিসেবে ব্যবহৃত হয়। - অর্ডার পরিবর্তন: একটি লিস্টের আইটেমগুলোর অর্ডার পরিবর্তন করার জন্যও এই
drag and dropপ্রক্রিয়া ব্যবহার করা যায়।
drag এবং drop ইভেন্টগুলি HTML5-এর শক্তিশালী বৈশিষ্ট্য, যা সহজে ইন্টারঅ্যাকটিভ এবং রিয়েল-টাইম ইন্টারফেস তৈরি করতে সহায়ক। ড্র্যাগেবল উপাদান এবং ড্রপ জোন তৈরি করে, আপনি বিভিন্ন ধরনের অ্যাপ্লিকেশন, যেমন ফাইল আপলোড, ড্যাশবোর্ড ইন্টারঅ্যাকশন, এবং ড্র্যাগ-এন্ড-ড্রপ গেম তৈরি করতে পারবেন। JavaScript দিয়ে এর কার্যকারিতা কাস্টমাইজ করা সম্ভব।
সারাংশ:
draggableঅ্যাট্রিব
িউট এবং drag ও drop ইভেন্টের মাধ্যমে সহজেই ড্র্যাগ এবং ড্রপ ফিচার তৈরি করা যায়।
- একাধিক ড্রপ জোন ব্যবহার করে বিভিন্ন কন্টেন্ট বা উপাদান ড্র্যাগ করে সরানো সম্ভব।
- এই ফিচারটি উন্নত ইউজার ইন্টারফেস এবং UX তৈরি করতে সহায়ক।
Read more
