script.aculo.us এবং ড্র্যাগ-এন্ড-ড্রপ
script.aculo.us হল একটি JavaScript লাইব্রেরি যা Prototype.js এর উপর ভিত্তি করে তৈরি করা হয়েছে এবং এটি ওয়েব ডেভেলপমেন্টের জন্য ড্র্যাগ-এন্ড-ড্রপ, অ্যানিমেশন, এবং ইউজার ইন্টারফেস (UI) এর বিভিন্ন ইন্টারঅ্যাকশন সহজ করে তোলে।
ড্র্যাগ-এন্ড-ড্রপ হল এমন একটি ইন্টারঅ্যাকশন কৌশল যেখানে ব্যবহারকারী একটি উপাদানকে একটি জায়গা থেকে অন্য জায়গায় নিয়ে যেতে পারে, এবং এটি সাধারণত ফর্ম উপাদান বা টেবিলের রেকর্ড বা গ্যালারির ছবি স্থানান্তরের জন্য ব্যবহৃত হয়।
script.aculo.us লাইব্রেরি ড্র্যাগ-এন্ড-ড্রপ সুবিধা প্রদান করে, যা HTML উপাদানগুলিকে ব্যবহারকারীর ড্র্যাগ এবং ড্রপ করার জন্য সক্ষম করে।
১. script.aculo.us এর ইনস্টলেশন
script.aculo.us সাধারণত Prototype.js লাইব্রেরির সাথে ব্যবহৃত হয়, তাই প্রথমে আপনাকে Prototype.js এবং script.aculo.us ইনক্লুড করতে হবে। আপনি এটি CDN বা ফাইল ডাউনলোডের মাধ্যমে ইনস্টল করতে পারেন।
CDN ব্যবহার করে ইনস্টলেশন:
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/script.aculo.us/1.9.0/scriptaculous.js"></script>
এটি আপনার HTML পৃষ্ঠার <head> ট্যাগে যুক্ত করুন।
২. ড্র্যাগ এবং ড্রপ ফিচার সেটআপ
script.aculo.us ড্র্যাগ-এন্ড-ড্রপ কার্যকলাপ বাস্তবায়ন করতে Draggable এবং Droppable এলিমেন্ট তৈরি করতে হয়। এই দুইটি উপাদানকে একটি ড্র্যাগেবল এলিমেন্ট এবং একটি ড্রপ টার্গেট হিসেবে সেটআপ করতে হবে।
ড্র্যাগেবল এলিমেন্ট তৈরি করা:
আপনার HTML পৃষ্ঠায় একটি এলিমেন্ট তৈরি করুন যা আপনি ড্র্যাগ করতে চান।
<div id="drag_me" style="width: 100px; height: 100px; background-color: blue; color: white; text-align: center; padding: 20px;">
Drag me!
</div>
<div id="drop_zone" style="width: 300px; height: 200px; border: 2px dashed #ccc; margin-top: 20px;">
Drop here
</div>
এখানে, drag_me হল ড্র্যাগ করা উপাদান এবং drop_zone হল ড্রপ টার্গেট এলিমেন্ট।
ড্র্যাগ এবং ড্রপ সেটআপ করা:
এখন, JavaScript কোড ব্যবহার করে ড্র্যাগ-এন্ড-ড্রপ সেটআপ করা হবে। script.aculo.us এর Draggable এবং Droppable ক্লাস ব্যবহার করা হয়।
document.observe("dom:loaded", function() {
// ড্র্যাগেবল এলিমেন্ট তৈরি করা
new Draggable("drag_me");
// ড্রপ এলিমেন্ট তৈরি করা
new Droppable("drop_zone", {
onDrop: function(draggableElement) {
alert(draggableElement.id + " has been dropped!");
}
});
});
এখানে, Draggable এর মাধ্যমে drag_me এলিমেন্টকে ড্র্যাগযোগ্য করা হয়েছে এবং Droppable এর মাধ্যমে drop_zone এলিমেন্টে ড্রপ করার জন্য সেট করা হয়েছে।
৩. ড্র্যাগ এবং ড্রপের কার্যকলাপ
এখন, যখন আপনি drag_me এলিমেন্টটি টেনে নিয়ে drop_zone এর মধ্যে রাখবেন, তখন একটি এলার্ট প্রদর্শিত হবে যা বলবে কোন এলিমেন্টটি ড্রপ করা হয়েছে।
আরো কাস্টমাইজেশন:
- আপনি
onDropফাংশনটি কাস্টমাইজ করে অন্যান্য কার্যকলাপ যেমন স্টাইল পরিবর্তন বা এলিমেন্ট স্থানান্তর করতে পারেন। - আপনি dragging এর সময় ড্র্যাগেবল এলিমেন্টের অবস্থান পরিবর্তন করতে পারেন।
document.observe("dom:loaded", function() {
new Draggable("drag_me", {
revert: true, // ড্র্যাগ করলে এলিমেন্ট তার পুরানো অবস্থানে ফিরে যাবে
scroll: window, // স্ক্রলিং সহ ড্র্যাগিং
});
new Droppable("drop_zone", {
onDrop: function(draggableElement) {
draggableElement.style.backgroundColor = "green"; // ড্রপ করার পর রঙ পরিবর্তন
}
});
});
এখানে, revert: true দ্বারা ড্র্যাগ করা এলিমেন্টটি তার পুরানো অবস্থানে ফিরে যাবে, এবং backgroundColor পরিবর্তন করা হয়েছে ড্রপ করার পর।
৪. ড্র্যাগ এবং ড্রপ স্টাইলিং এবং ইউআই উন্নতি
script.aculo.us ড্র্যাগ এবং ড্রপকে আরও উন্নত করতে ইউআই বা স্টাইলিং পরিবর্তন করতে পারেন। আপনি CSS ব্যবহার করে ড্র্যাগেবল এবং ড্রপ টার্গেটের স্টাইল উন্নত করতে পারবেন।
CSS স্টাইলিং:
#drag_me {
cursor: move;
border: 2px solid black;
}
#drop_zone {
background-color: #f0f0f0;
text-align: center;
line-height: 200px;
}
#drop_zone.over {
background-color: #e0ffe0;
border: 2px solid green;
}
এখানে, ড্র্যাগেবল এলিমেন্টের জন্য cursor: move; দেওয়া হয়েছে যাতে ব্যবহারকারী জানে এটি ড্র্যাগ করা যাবে, এবং drop_zone এলিমেন্টের স্টাইলিং এবং হোভার অবস্থায় পরিবর্তন করা হয়েছে।
সারাংশ
script.aculo.us লাইব্রেরি ড্র্যাগ-এন্ড-ড্রপ কার্যকলাপ বাস্তবায়ন করার জন্য একটি শক্তিশালী এবং সহজ পদ্ধতি প্রদান করে। এটি Prototype.js এর উপর ভিত্তি করে কাজ করে এবং আপনি এর মাধ্যমে ড্র্যাগ এবং ড্রপ সিস্টেম তৈরি করতে পারেন যা একটি দুর্দান্ত ইউজার ইন্টারফেস তৈরি করবে। ড্র্যাগেবল এবং ড্রপযোগ্য এলিমেন্টগুলির সাথে কাজ করার জন্য সহজভাবে Draggable এবং Droppable ডেকোরেটর ব্যবহার করা হয়, যা ডেটা স্থানান্তর এবং ফর্ম বা অন্যান্য ইন্টারঅ্যাকশন তৈরি করতে সহায়ক।
Read more
