Sortable: তালিকাভুক্ত আইটেম গুলোকে সর্টেবল করা

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-এর বিভিন্ন কাস্টমাইজেশন ব্যবহার করে আপনার প্রয়োজন অনুযায়ী এটি আরও উন্নত করতে পারেন।