jQueryUI এর ইন্টারঅ্যাকশনস ফিচার ওয়েব ডেভেলপারদের জন্য খুবই কার্যকরী, বিশেষত যখন ওয়েব পেজে ড্র্যাগ-এন্ড-ড্রপ, এলিমেন্ট রিবিন্ডিং এবং অন্যান্য ইন্টারেক্টিভ কার্যক্রমের প্রয়োজন হয়। এর মধ্যে তিনটি জনপ্রিয় ফিচার হলো: Draggable, Droppable, এবং Sortable। এগুলির মাধ্যমে আপনি ওয়েব পেজে বিভিন্ন ধরণের ইন্টারঅ্যাকটিভ এলিমেন্ট তৈরি করতে পারেন, যেমন এলিমেন্ট মুভ করা, এলিমেন্ট একে অপরের মধ্যে স্থানান্তর করা, বা এলিমেন্টগুলিকে পুনঃব্যবস্থা করা। নিচে প্রতিটি ফিচারের বিস্তারিত আলোচনা করা হলো।
১. Draggable
Draggable উইজেট ব্যবহার করে আপনি যেকোনো HTML উপাদানকে ড্র্যাগযোগ্য করতে পারেন। এটি ব্যবহারকারীদের একটি এলিমেন্ট টেনে অন্য জায়গায় সরানোর সুবিধা দেয়। সাধারণত, এটি ফাইল আপলোড, ইমেজ গ্যালারি, বা আইটেমের পুনর্বিন্যাসের জন্য ব্যবহৃত হয়।
উদাহরণ:
<div id="draggable" class="ui-widget-content">
<p>এটি একটি ড্র্যাগযোগ্য এলিমেন্ট।</p>
</div>
<script>
$(function() {
$("#draggable").draggable();
});
</script>
এখানে, draggable() মেথড ব্যবহার করা হয়েছে, যার মাধ্যমে #draggable আইডি সহ এলিমেন্টটি ড্র্যাগযোগ্য হয়ে গেছে।
কাস্টমাইজেশন:
- containment: এলিমেন্টটি শুধুমাত্র নির্দিষ্ট এলাকার মধ্যে ড্র্যাগ করা যাবে।
- cursor: ড্র্যাগের সময় মাউস কাস্টম কার্সর ব্যবহার করা যাবে।
$(function() {
$("#draggable").draggable({
containment: "parent", // প্যারেন্ট এলিমেন্টের মধ্যে সীমাবদ্ধ থাকবে
cursor: "move" // মাউস কাস্টম কার্সর
});
});
২. Droppable
Droppable উইজেট ব্যবহারকারীদের একটি এলিমেন্ট ড্রপ করার জন্য একটি নির্দিষ্ট এলাকা তৈরি করতে সহায়তা করে। এটি সাধারণত ড্র্যাগ-এন্ড-ড্রপ ফিচার তৈরি করার জন্য ব্যবহৃত হয়। উদাহরণস্বরূপ, আপনি একটি ফাইল ড্র্যাগ করে একটি নির্দিষ্ট এলাকাতে ড্রপ করার ব্যবস্থা তৈরি করতে পারেন।
উদাহরণ:
<div id="draggable" class="ui-widget-content">
<p>এটি একটি ড্র্যাগযোগ্য এলিমেন্ট।</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>এখানে ড্রপ করুন।</p>
</div>
<script>
$(function() {
$("#draggable").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
$(this).addClass("ui-state-highlight").find("p").html("ড্রপ হয়েছে!");
}
});
});
</script>
এখানে, droppable() মেথড ব্যবহার করা হয়েছে, যার মাধ্যমে #droppable এলিমেন্টে ড্র্যাগ করা আইটেমটি ড্রপ করা যাবে। যখন ড্র্যাগেবল এলিমেন্টটি ড্রপ হবে, তখন drop ইভেন্ট ট্রিগার হবে এবং ড্রপ এরিয়া স্টাইল হবে।
কাস্টমাইজেশন:
- accept: নির্দিষ্ট ধরনের এলিমেন্ট গ্রহণ করা।
- activeClass: ড্র্যাগের সময় ড্রপ এলিমেন্টের জন্য একটি সক্রিয় ক্লাস প্রদান করা।
$(function() {
$("#droppable").droppable({
accept: "#draggable", // শুধুমাত্র #draggable এলিমেন্ট গ্রহণ করবে
activeClass: "ui-state-active" // ড্র্যাগিংয়ের সময় সক্রিয় ক্লাস
});
});
৩. Sortable
Sortable উইজেট ব্যবহারকারীদের এলিমেন্টগুলিকে পুনঃক্রমে সাজানোর সুবিধা দেয়। এটি সাধারণত তালিকা বা গ্রিডের আইটেমগুলো পুনর্বিন্যাস করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, একটি তালিকা বা ড্যাশবোর্ডের আইটেমগুলো ড্র্যাগ করে পুনরায় সাজানো যেতে পারে।
উদাহরণ:
<ul id="sortable">
<li class="ui-state-default">আইটেম ১</li>
<li class="ui-state-default">আইটেম ২</li>
<li class="ui-state-default">আইটেম ৩</li>
</ul>
<script>
$(function() {
$("#sortable").sortable();
});
</script>
এখানে sortable() মেথড ব্যবহার করা হয়েছে, যার মাধ্যমে একটি তালিকা বা লিস্ট আইটেমকে ড্র্যাগ করে পুনর্বিন্যাস করা যাবে।
কাস্টমাইজেশন:
- revert: ড্র্যাগ করে পুনরায় স্থানে ফিরিয়ে আনার সময় অ্যানিমেশন প্রয়োগ করা।
- axis: শুধুমাত্র একটি নির্দিষ্ট অক্ষে (X বা Y) এলিমেন্টগুলি সরানো হবে।
$(function() {
$("#sortable").sortable({
revert: true, // অ্যানিমেশন প্রয়োগ
axis: "y" // শুধুমাত্র Y অক্ষের উপর এলিমেন্টগুলো সরানো যাবে
});
});
উপসংহার
jQueryUI এর Draggable, Droppable, এবং Sortable ইন্টারঅ্যাকশনস একত্রে ব্যবহার করে আপনি ওয়েব পেজে ড্র্যাগ-এন্ড-ড্রপ, এলিমেন্ট পুনর্বিন্যাস এবং আরও অনেক কার্যকরী ফিচার তৈরি করতে পারেন। এগুলো ডেভেলপারদের জন্য সময় বাঁচানোর পাশাপাশি ব্যবহারকারীদের জন্য একটি ইন্টারঅ্যাকটিভ এবং স্মুথ অভিজ্ঞতা প্রদান করে। এসব ফিচারের কাস্টমাইজেশন অপশনগুলি ব্যবহার করে আপনি আপনার ওয়েব অ্যাপ্লিকেশনগুলির ইন্টারফেসকে আরও শক্তিশালী এবং আকর্ষণীয় করে তুলতে পারেন।
Draggable উইজেট jQueryUI-তে একটি গুরুত্বপূর্ণ ফিচার যা ব্যবহারকারীদের ওয়েব পেজে এলিমেন্টগুলো ড্র্যাগ করে এক স্থান থেকে অন্য স্থানে সরানোর সুবিধা প্রদান করে। এটি সাধারণত ফাইল ম্যানেজার, ড্যাশবোর্ড, বা এমন কোন ইন্টারফেসে ব্যবহৃত হয় যেখানে ব্যবহারকারীরা উপাদানগুলোকে পুনর্বিন্যাস করতে চান।
এখানে আমরা দেখবো কিভাবে সহজে jQueryUI এর মাধ্যমে একটি এলিমেন্টকে ড্র্যাগযোগ্য করা যায়।
১. প্রাথমিক সেটআপ
প্রথমে, jQuery এবং jQueryUI লাইব্রেরি আপনার HTML ফাইলে অন্তর্ভুক্ত করতে হবে। নিচে প্রাথমিক সেটআপের উদাহরণ দেওয়া হলো:
<!-- jQuery লোড -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- jQueryUI স্টাইল শীট -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<!-- jQueryUI স্ক্রিপ্ট -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
২. HTML এলিমেন্ট তৈরি
এখন, একটি এলিমেন্ট তৈরি করা যাকে আমরা ড্র্যাগযোগ্য করতে চাই। এখানে একটি সাধারণ div ট্যাগ ব্যবহার করা হচ্ছে:
<div id="draggable" style="width: 100px; height: 100px; background-color: #4CAF50; color: white; text-align: center;">
Drag me
</div>
এটি একটি div এলিমেন্ট তৈরি করবে যা এক জায়গা থেকে অন্য জায়গায় ড্র্যাগ করা যাবে।
৩. Draggable ফিচার যোগ করা
এখন, jQuery কোড ব্যবহার করে আমরা এই div এলিমেন্টকে ড্র্যাগযোগ্য করতে পারি। নিচে উদাহরণ দেওয়া হলো:
$(document).ready(function() {
$("#draggable").draggable();
});
এই কোডটি #draggable আইডি সহ এলিমেন্টে draggable() ফাংশন প্রয়োগ করবে, ফলে ব্যবহারকারী ওই এলিমেন্টটি ড্র্যাগ করতে সক্ষম হবেন।
৪. কাস্টমাইজেশন
Draggable উইজেটটি বিভিন্ন কাস্টমাইজেশন অপশন সরবরাহ করে যা ব্যবহারকারী ইন্টারঅ্যাকশনকে আরো নিয়ন্ত্রণযোগ্য এবং সুবিধাজনক করে তোলে। নিচে কিছু কাস্টমাইজেশন অপশন দেয়া হলো:
১. ড্র্যাগ করার কন্ডিশন
ড্র্যাগেবল এলিমেন্টটি শুধুমাত্র নির্দিষ্ট শর্তে ড্র্যাগযোগ্য হতে পারে। যেমন, শুধুমাত্র একটি নির্দিষ্ট অংশ ক্লিক করে এলিমেন্টটি ড্র্যাগ করা যাবে:
$(document).ready(function() {
$("#draggable").draggable({
handle: "#draggable" // এলিমেন্টটির মধ্যে শুধুমাত্র নির্দিষ্ট অংশ দিয়ে ড্র্যাগ করা যাবে
});
});
২. ড্র্যাগ সীমাবদ্ধ করা (Containment)
আপনি চাইলে এলিমেন্টটিকে একটি নির্দিষ্ট সীমার মধ্যে ড্র্যাগ করতে পারেন। উদাহরণস্বরূপ, এলিমেন্টটি পেজের মধ্যে সীমাবদ্ধ রাখা:
$(document).ready(function() {
$("#draggable").draggable({
containment: "parent" // প্যারেন্ট এলিমেন্টের মধ্যে সীমাবদ্ধ থাকবে
});
});
এটি এলিমেন্টটিকে তার প্যারেন্ট এলিমেন্টের মধ্যে সীমাবদ্ধ রাখবে, অর্থাৎ এটি প্যারেন্ট এলিমেন্টের বাইরে যাবে না।
৩. ড্র্যাগ ইভেন্টস
আপনি ড্র্যাগের সময় কিছু নির্দিষ্ট কার্যক্রম সম্পাদন করতে পারেন। যেমন, ড্র্যাগ শুরু হলে বা ড্র্যাগ শেষ হলে কিছু কার্যক্রম চালানো:
$(document).ready(function() {
$("#draggable").draggable({
start: function(event, ui) {
console.log("Dragging started");
},
stop: function(event, ui) {
console.log("Dragging stopped");
}
});
});
এখানে, start ইভেন্টের মাধ্যমে ড্র্যাগিং শুরু হলে একটি মেসেজ কনসোলে দেখানো হবে এবং stop ইভেন্টের মাধ্যমে ড্র্যাগিং শেষ হলে অন্য একটি মেসেজ দেখানো হবে।
৪. এলিমেন্টের ধরন এবং আকার পরিবর্তন
আপনি ড্র্যাগেবল এলিমেন্টটির আকারও পরিবর্তন করতে পারেন, যেমন এর দৈর্ঘ্য বা প্রস্থ কাস্টমাইজ করা:
$(document).ready(function() {
$("#draggable").draggable({
helper: "clone" // ড্র্যাগিংয়ের সময় একটি ক্লোন তৈরি হবে
});
});
এটি ড্র্যাগ করা শুরু হলে মূল এলিমেন্টের একটি ক্লোন তৈরি করবে, যার ফলে মূল এলিমেন্টটি তার অবস্থানে থাকবে এবং ক্লোনটি ড্র্যাগ হবে।
৫. ড্র্যাগ এবং ড্রপ
jQueryUI-তে ড্র্যাগেবল এলিমেন্টকে একটি নির্দিষ্ট ড্রপ টার্গেটে ড্রপ করার জন্য আপনি droppable উইজেট ব্যবহার করতে পারেন। এটি ড্র্যাগেবল এলিমেন্টকে নির্দিষ্ট জায়গায় ড্রপ করার সুযোগ দেয়।
$(document).ready(function() {
$("#draggable").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
$(this).addClass("ui-state-highlight").html("Dropped!");
}
});
});
এখানে, droppable উইজেটের মাধ্যমে একটি এলিমেন্ট নির্দিষ্ট জায়গায় ড্রপ করার পর একটি হাইলাইট প্রদর্শিত হবে।
উপসংহার
Draggable উইজেট jQueryUI-তে একটি শক্তিশালী ফিচার যা ওয়েব ডেভেলপমেন্টে বিভিন্ন ধরনের ইন্টারঅ্যাকটিভ উপাদান তৈরি করতে সহায়তা করে। এটি ব্যবহারকারীকে এলিমেন্টগুলো ড্র্যাগ করে এক স্থান থেকে অন্য স্থানে সরানোর সুযোগ দেয় এবং বিভিন্ন কাস্টমাইজেশন অপশন ব্যবহার করে আপনার প্রয়োজন অনুযায়ী সেটিকে নিয়ন্ত্রণ করতে পারেন। jQueryUI-এর এই ফিচারটি খুবই সুবিধাজনক এবং ইন্টারফেসকে আরও ডাইনামিক ও ব্যবহারকারী-বান্ধব করে তোলে।
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, এবং অন্যান্য কাস্টম অপশন ব্যবহার করে এই ফিচারটি কাস্টমাইজ করতে পারেন।
jQueryUI Sortable উইজেট ব্যবহার করে আপনি একটি তালিকাভুক্ত (list) আইটেমকে ড্র্যাগ-এন্ড-ড্রপ ফিচারের মাধ্যমে সহজেই পুনর্বিন্যাস করতে পারেন। এটি ব্যবহারকারীদের জন্য তালিকা বা অন্যান্য আইটেমের মধ্যে সর্টেবল (sortable) সুবিধা প্রদান করে, যাতে তারা তাদের পছন্দ অনুযায়ী আইটেমগুলো পুনর্বিন্যাস করতে পারেন।
এখানে আমরা আলোচনা করব কিভাবে একটি সর্টেবল তালিকা তৈরি করতে হয় jQueryUI Sortable উইজেট ব্যবহার করে।
jQueryUI Sortable উইজেট ব্যবহার করার পদক্ষেপ
১. প্রাথমিক সেটআপ
প্রথমে, আপনাকে jQuery এবং jQueryUI এর প্রয়োজনীয় CSS এবং JavaScript ফাইল আপনার HTML ফাইলে যোগ করতে হবে। নিচে এর জন্য কোড দেওয়া হলো:
<!-- 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>
২. HTML তালিকা তৈরি
এখন, একটি সিম্পল তালিকা তৈরি করুন যাতে আপনি jQueryUI Sortable উইজেটটি ব্যবহার করবেন। উদাহরণস্বরূপ:
<ul id="sortable">
<li>আইটেম 1</li>
<li>আইটেম 2</li>
<li>আইটেম 3</li>
<li>আইটেম 4</li>
<li>আইটেম 5</li>
</ul>
এটি একটি unordered list (UL) তৈরি করে যেখানে আইটেমগুলো রয়েছে। আমরা jQueryUI Sortable উইজেটের মাধ্যমে এই আইটেমগুলোকে ড্র্যাগ-এন্ড-ড্রপ করে পুনর্বিন্যাস করতে সক্ষম হব।
৩. jQuery কোড ব্যবহার
এখন, আপনাকে jQuery কোড ব্যবহার করে এই তালিকাটিকে sortable করতে হবে। নিচের কোডটি আপনার স্ক্রিপ্ট সেকশনে যোগ করুন:
$(document).ready(function() {
$("#sortable").sortable();
$("#sortable").disableSelection(); // নির্বাচনের জন্য ডিফল্ট প্রক্রিয়া নিষ্ক্রিয় করা
});
এই কোডটি #sortable আইডি সহ তালিকাকে sortable করে দিবে, যা ব্যবহারকারীকে আইটেমগুলো ড্র্যাগ-এন্ড-ড্রপ করতে অনুমতি দেয়।
৪. কাস্টমাইজেশন
আপনি jQueryUI Sortable উইজেটের বিভিন্ন কাস্টমাইজেশনও করতে পারেন। কিছু সাধারণ কাস্টমাইজেশন নিচে দেওয়া হলো:
সেট অর্ডার: আপনি এটি ডিফল্টভাবে তালিকা আইটেমগুলোর অর্ডার সংরক্ষণ করতে পারেন।
$(document).ready(function() { $("#sortable").sortable({ update: function(event, ui) { var order = $(this).sortable("toArray"); console.log("আইটেমগুলো সাজানো হয়েছে: " + order); } }); });ড্র্যাগ হ্যান্ডলিং: আপনি নির্দিষ্ট একটি এলিমেন্ট দিয়ে ড্র্যাগিং নিয়ন্ত্রণ করতে পারেন। উদাহরণস্বরূপ, আপনি আইটেমের একটি বাটন দিয়ে ড্র্যাগ করতে চান।
<ul id="sortable"> <li><span class="handle">☰</span> আইটেম 1</li> <li><span class="handle">☰</span> আইটেম 2</li> <li><span class="handle">☰</span> আইটেম 3</li> </ul>$(document).ready(function() { $("#sortable").sortable({ handle: ".handle" // .handle ক্লাস দিয়ে ড্র্যাগ করতে অনুমতি দিচ্ছে }); });রিভার্স অর্ডার: আপনি মেনু বা তালিকার আইটেমগুলোকে রিভার্স অর্ডারে সাজাতে পারেন।
$(document).ready(function() { $("#sortable").sortable({ reverse: true // রিভার্স অর্ডারে আইটেমগুলো সাজানো হবে }); });
৫. স্টাইলিং
আপনি CSS ব্যবহার করে আপনার sortable তালিকার স্টাইল পরিবর্তন করতে পারেন। উদাহরণস্বরূপ:
#sortable {
list-style-type: none;
margin: 0;
padding: 0;
}
#sortable li {
margin: 3px;
padding: 10px;
background-color: #f2f2f2;
border: 1px solid #ddd;
cursor: move;
}
#sortable li:hover {
background-color: #e2e2e2;
}
এই CSS কোডটি তালিকার আইটেমগুলোর জন্য মাইনিং এবং প্যাডিং সেট করবে, এবং ড্র্যাগ হোভার ইফেক্টও যোগ করবে।
উপসংহার
jQueryUI Sortable উইজেট ব্যবহার করে আপনি সহজেই একটি তালিকা আইটেমকে ড্র্যাগ-এন্ড-ড্রপ করে সর্টেবল (sortable) করতে পারেন। এটি ব্যবহারকারীদের আইটেম পুনর্বিন্যাস করতে সাহায্য করে, যা বিভিন্ন ওয়েব অ্যাপ্লিকেশন এবং ফর্মের জন্য খুবই কার্যকরী। আপনি jQueryUI Sortable-এর বিভিন্ন কাস্টমাইজেশন ব্যবহার করে আপনার প্রয়োজন অনুযায়ী এটি আরও উন্নত করতে পারেন।
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
