Droppable উইজেট jQueryUI-এর একটি শক্তিশালী ফিচার, যা ব্যবহারকারীকে একটি ড্র্যাগড এলিমেন্ট (যেমন, একটি আইটেম বা উপাদান) নির্দিষ্ট এলাকায় ড্রপ করার সুযোগ প্রদান করে। এটি সাধারণত Drag and Drop ইন্টারঅ্যাকশনের জন্য ব্যবহৃত হয়, যেখানে আপনি একটি এলিমেন্টকে একটি নির্দিষ্ট জায়গায় ড্র্যাগ এবং ড্রপ করতে পারবেন।
এই উইজেটটি ওয়েবসাইটে ইন্টারঅ্যাকটিভ ফিচার যুক্ত করতে ব্যবহৃত হয়, যেমন শপিং কার্টে পণ্য যোগ করা, ডেটা পুনর্বিন্যাস করা বা অন্যান্য ব্যবহারের ক্ষেত্রে।
১. HTML ফাইল তৈরি করা
প্রথমে একটি HTML ফাইল তৈরি করুন, যেখানে একটি ড্র্যাগড এলিমেন্ট এবং ড্রপ করার জন্য একটি এলাকা থাকবে। নিচে একটি উদাহরণ দেওয়া হলো:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Droppable উদাহরণ</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 JavaScript লোড -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<style>
#dragItem {
width: 100px;
height: 100px;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 100px;
cursor: pointer;
}
#dropArea {
width: 150px;
height: 150px;
border: 2px dashed #ccc;
text-align: center;
line-height: 150px;
color: #ccc;
}
</style>
</head>
<body>
<!-- ড্র্যাগ আইটেম -->
<div id="dragItem">ড্র্যাগ করুন</div>
<!-- ড্রপ এলাকা -->
<div id="dropArea">এখানে ড্রপ করুন</div>
<script>
$(document).ready(function() {
// ড্র্যাগ আইটেমকে ড্র্যাগযোগ্য করা
$("#dragItem").draggable();
// ড্রপ এলাকা তৈরি করা
$("#dropArea").droppable({
accept: "#dragItem", // কোন এলিমেন্টটিকে ড্রপ করার অনুমতি দেয়া হবে
drop: function(event, ui) {
$(this).html("ড্রপ করা হয়েছে!"); // ড্রপ করার পর টেক্সট পরিবর্তন
$(this).css("background-color", "#8BC34A"); // ড্রপ করার পর ব্যাকগ্রাউন্ড কালার পরিবর্তন
}
});
});
</script>
</body>
</html>
২. কোডের ব্যাখ্যা
- jQuery এবং jQueryUI লোড করা: প্রথমে jQuery এবং jQueryUI এর CSS এবং JavaScript ফাইলগুলি লোড করা হয়েছে, যা
draggableএবংdroppableফিচার চালু করবে। - ড্র্যাগ আইটেম:
#dragItemহল সেই এলিমেন্ট যা ব্যবহারকারী ড্র্যাগ করতে পারবেন। এটি একটি সবুজ রঙের বক্সের মত দেখাবে এবং ব্যবহারকারী এটিকে ড্র্যাগ করে#dropAreaতে ড্রপ করতে পারবে।
- ড্রপ এলাকা:
#dropAreaহল সেই এলাকা যেখানে ব্যবহারকারী ড্র্যাগড আইটেমটিকে ড্রপ করবেন। এটি একটি ড্যাশড বর্ডার সহ একটি বড় এলাকা, যেখানে ড্র্যাগড আইটেমটি ড্রপ করা যাবে।
- draggable() ফাংশন:
$("#dragItem").draggable();এর মাধ্যমে#dragItemকে ড্র্যাগ করার উপযোগী করা হয়েছে।
- droppable() ফাংশন:
$("#dropArea").droppable()ফাংশনটি#dropAreaএলিমেন্টে ড্রপ করার কার্যকারিতা যোগ করে।- accept: এখানে
accept: "#dragItem"ব্যবহার করা হয়েছে, যার মাধ্যমে কেবলমাত্র#dragItemকে#dropAreaতে ড্রপ করার অনুমতি দেওয়া হয়েছে। - drop: এই ফাংশনটি ড্রপ করার পর কার্যকর হয়, এবং এটি ড্রপ এলিমেন্টের ভিতরের টেক্সট পরিবর্তন এবং ব্যাকগ্রাউন্ড কালার পরিবর্তন করে।
৩. কাস্টমাইজেশন
jQueryUI droppable() ফাংশনটি বেশ কিছু কাস্টমাইজেশন অপশন প্রদান করে। নিচে কিছু সাধারণ কাস্টম অপশন দেওয়া হলো:
greedy: এটি ডিফল্ট হিসেবে
false, কিন্তু আপনি যদি চান যে ড্র্যাগড আইটেমটি একাধিক ড্রপ এলিমেন্টের উপর একই সময়ে ড্রপ করা যাক, তাহলেgreedyঅপশনটিtrueকরতে পারেন।greedy: truehoverClass: আপনি ড্রপ এলিমেন্টের ওপর হোভার করার সময় স্টাইল পরিবর্তন করতে
hoverClassব্যবহার করতে পারেন।hoverClass: "ui-state-active"accept: এটি দিয়ে আপনি নির্দিষ্ট ড্র্যাগ আইটেমকে গ্রহণযোগ্য করতে পারেন। যেমন, একটি নির্দিষ্ট শ্রেণী বা আইডি দিয়ে এলিমেন্ট গ্রহণ করা।
accept: ".draggable-item"
৪. ব্যবহারকারী ইন্টারফেস
এই কোডটি চালানোর পর, ব্যবহারকারী যখন #dragItem এলিমেন্টটি #dropArea তে ড্র্যাগ এবং ড্রপ করবেন, তখন #dropArea এর টেক্সট পরিবর্তন হয়ে "ড্রপ করা হয়েছে!" হয়ে যাবে এবং ব্যাকগ্রাউন্ড কালার পরিবর্তন হবে।
উপসংহার
jQueryUI Droppable উইজেট ব্যবহার করে আপনি সহজেই ড্র্যাগড আইটেমকে নির্দিষ্ট একটি এলাকায় ড্রপ করার ক্ষমতা যোগ করতে পারেন। এটি ওয়েব পেজে ইন্টারঅ্যাকটিভ ফিচার তৈরি করতে খুবই কার্যকরী, যেমন ড্র্যাগ-এন্ড-ড্রপ ফর্ম, শপিং কার্ট, বা ডেটা পুনর্বিন্যাস করা। আপনি সহজেই accept, drop, এবং অন্যান্য কাস্টম অপশন ব্যবহার করে এই ফিচারটি কাস্টমাইজ করতে পারেন।
Read more
