Drag-and-Drop একটি গুরুত্বপূর্ণ ফিচার যা ব্যবহারকারীদের জন্য ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব ওয়েবসাইট তৈরি করতে সহায়ক। jQueryUI-এর ড্র্যাগ-এন্ড-ড্রপ (Drag-and-Drop) ফিচারটি ব্যবহার করে, আপনি সহজেই HTML উপাদানগুলোকে এক জায়গা থেকে অন্য জায়গায় সরাতে পারবেন। এটি বিভিন্ন ইভেন্টের মাধ্যমে কাস্টম ইন্টারঅ্যাকশন তৈরি করার সুযোগ দেয়।
এই গাইডে আমরা jQueryUI-এর ড্র্যাগ-এন্ড-ড্রপ ইভেন্ট এবং কাস্টম ইন্টারঅ্যাকশন নিয়ে আলোচনা করব।
১. ড্র্যাগ-এন্ড-ড্রপ ফিচার ইনিশিয়েট করা
প্রথমে, ড্র্যাগ-এন্ড-ড্রপ ফিচারটি কার্যকর করতে আপনাকে jQueryUI এর draggable() এবং droppable() মেথড ব্যবহার করতে হবে।
উদাহরণ:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag-and-Drop উদাহরণ</title>
<!-- jQuery লোড -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- jQueryUI CSS লোড -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<!-- jQueryUI JS লোড -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<style>
#draggable {
width: 100px;
height: 100px;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 100px;
cursor: pointer;
}
#droppable {
width: 200px;
height: 200px;
background-color: #f2f2f2;
border: 2px dashed #ccc;
text-align: center;
line-height: 200px;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="draggable">ড্র্যাগ করুন</div>
<div id="droppable">এখানে ড্রপ করুন</div>
<script>
$(document).ready(function() {
// ড্র্যাগেবল উপাদান তৈরি করা
$("#draggable").draggable();
// ড্রপেবল এলিমেন্ট তৈরি করা
$("#droppable").droppable({
drop: function(event, ui) {
$(this).html("ড্র্যাগ সফলভাবে ড্রপ করা হয়েছে!");
}
});
});
</script>
</body>
</html>
কোড ব্যাখ্যা
- draggable():
#draggableউপাদানটিকে ড্র্যাগ করা যায় এমন একটি এলিমেন্ট হিসেবে তৈরি করে। এটি ব্যবহারকারীকে উপাদানটি টেনে নিয়ে যেতে সাহায্য করে। - droppable():
#droppableএলিমেন্টটিকে ড্রপযোগ্য এলিমেন্ট হিসেবে সেট করে, যার মাধ্যমে ড্র্যাগ করা উপাদানটি ড্রপ করা যাবে।
২. ড্র্যাগ-এন্ড-ড্রপ ইভেন্টস
jQueryUI ড্র্যাগ-এন্ড-ড্রপ ফিচারের সাথে কিছু ইভেন্ট যুক্ত করা যেতে পারে, যা ড্র্যাগ এবং ড্রপ প্রক্রিয়ার বিভিন্ন ধাপ ট্র্যাক করতে সহায়তা করে।
ইভেন্টগুলি:
- start: ড্র্যাগ শুরু হওয়ার সময়
- drag: ড্র্যাগging চলাকালীন
- stop: ড্র্যাগ শেষ হওয়ার সময়
- drop: ড্রপ ইভেন্ট যখন সফলভাবে ঘটে
উদাহরণ:
$(document).ready(function() {
// ড্র্যাগেবল উপাদান সেট করা
$("#draggable").draggable({
start: function(event, ui) {
console.log("ড্র্যাগ শুরু হয়েছে!");
},
drag: function(event, ui) {
console.log("ড্র্যাগ চলমান...");
},
stop: function(event, ui) {
console.log("ড্র্যাগ শেষ হয়েছে!");
}
});
// ড্রপেবল এলিমেন্ট সেট করা
$("#droppable").droppable({
drop: function(event, ui) {
console.log("ড্র্যাগ সফলভাবে ড্রপ করা হয়েছে!");
$(this).html("এখানে ড্রপ করা হয়েছে!");
}
});
});
৩. কাস্টম ইন্টারঅ্যাকশন তৈরি করা
jQueryUI ড্র্যাগ-এন্ড-ড্রপ ফিচারের সাহায্যে আপনি কাস্টম ইন্টারঅ্যাকশনও তৈরি করতে পারেন, যেমন ড্র্যাগged উপাদানটির স্টাইল পরিবর্তন, ড্রপ এলিমেন্টের কনটেন্ট আপডেট করা, বা ড্র্যাগ-এন্ড-ড্রপ ইভেন্টে কাস্টম ক্লাস যুক্ত করা।
উদাহরণ:
$(document).ready(function() {
// ড্র্যাগgable উপাদানটি কাস্টম স্টাইল দেওয়া
$("#draggable").draggable({
start: function(event, ui) {
$(this).css("background-color", "red"); // ড্র্যাগ শুরু হলে রঙ পরিবর্তন
},
stop: function(event, ui) {
$(this).css("background-color", "green"); // ড্র্যাগ শেষ হলে রঙ ফেরত
}
});
// ড্রপেবল এলিমেন্টে কাস্টম ইন্টারঅ্যাকশন
$("#droppable").droppable({
over: function(event, ui) {
$(this).css("background-color", "#ccc"); // ড্র্যাগ এলিমেন্টের উপর এলিমেন্ট রাখলে
},
out: function(event, ui) {
$(this).css("background-color", "#f2f2f2"); // ড্র্যাগ এলিমেন্ট বের হলে
},
drop: function(event, ui) {
$(this).html("ড্রপ করা হয়েছে!");
$(this).css("background-color", "#4CAF50"); // ড্রপ পরবর্তী পরিবর্তন
}
});
});
৪. আরও কাস্টমাইজেশন
jQueryUI ড্র্যাগ-এন্ড-ড্রপ ফিচারের অনেক কাস্টমাইজেশন অপশন রয়েছে, যেমন:
- revert: ড্র্যাগged উপাদানটি ড্রপ না হলে তার আগের অবস্থায় ফিরে আসবে।
- containment: ড্র্যাগged উপাদানটির চলাচলের সীমা নির্ধারণ করা।
- helper: ড্র্যাগged উপাদানটির জন্য কাস্টম হেল্পার তৈরি করা।
উদাহরণ:
$("#draggable").draggable({
revert: "invalid", // ড্রপ এলিমেন্টে না গেলে এলিমেন্টটি তার আগের অবস্থানে ফিরে যাবে
containment: "#droppable", // ড্র্যাগ এলিমেন্টটি শুধুমাত্র ড্রপ এলিমেন্টের মধ্যে থাকবে
helper: "clone" // ড্র্যাগged উপাদানটি কপি হবে, মূল এলিমেন্টটি সরবে না
});
উপসংহার
jQueryUI ড্র্যাগ-এন্ড-ড্রপ ফিচারটি অত্যন্ত শক্তিশালী এবং এটি বিভিন্ন কাস্টম ইন্টারঅ্যাকশন এবং ইভেন্ট প্রদান করে, যা আপনাকে একটি ইন্টারেক্টিভ এবং ব্যবহারকারী-বান্ধব ওয়েবসাইট তৈরি করতে সহায়তা করে। ড্র্যাগ-এন্ড-ড্রপ ইভেন্টের মাধ্যমে আপনি ড্র্যাগ এবং ড্রপ প্রক্রিয়া ট্র্যাক করতে পারেন এবং কাস্টম ইন্টারঅ্যাকশন তৈরি করতে পারেন যা আপনার ওয়েব অ্যাপ্লিকেশনকে আরও ডাইনামিক এবং ইউজার-বান্ধব করে তোলে।
Read more
