Draggable: এলিমেন্টকে ড্র্যাগযোগ্য করা

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-এর এই ফিচারটি খুবই সুবিধাজনক এবং ইন্টারফেসকে আরও ডাইনামিক ও ব্যবহারকারী-বান্ধব করে তোলে।