script.aculo.us এবং Drag and Drop
script.aculo.us একটি JavaScript লাইব্রেরি যা ড্র্যাগ অ্যান্ড ড্রপ, অ্য্যানিমেশন, ইফেক্টস এবং AJAX এর জন্য সমর্থন প্রদান করে। এটি Prototype.js লাইব্রেরির উপর ভিত্তি করে তৈরি এবং ডেভেলপারদের জন্য ওয়েব পেজগুলিতে ইন্টারেক্টিভ ফিচার যোগ করতে সহজতর করে। Drag and Drop হল এমন একটি ইন্টারেকশন যেখানে ব্যবহারকারী একটি উপাদান (এলিমেন্ট) একটি স্থান থেকে অন্য স্থানে টেনে নিয়ে যেতে পারেন।
script.aculo.us এর Drag and Drop ফিচার ব্যবহার করে, আপনি খুব সহজেই ওয়েব পেজে ড্র্যাগযোগ্য এলিমেন্ট তৈরি করতে পারেন এবং এক জায়গা থেকে অন্য জায়গায় স্থানান্তর করতে পারেন।
script.aculo.us এর মাধ্যমে Drag and Drop ইভেন্ট হ্যান্ডলিং
এখানে, Drag and Drop ইভেন্ট হ্যান্ডলিং ব্যবহার করে আপনি একটি এলিমেন্টকে একটি নির্দিষ্ট এলাকাতে টেনে নিয়ে যেতে পারবেন এবং সেই স্থানান্তরিত এলিমেন্টটির উপর কিছু ফাংশনালিটি প্রয়োগ করতে পারবেন।
ধাপ ১: script.aculo.us লাইব্রেরি যুক্ত করা
প্রথমে আপনাকে script.aculo.us লাইব্রেরি আপনার HTML ফাইলে যুক্ত করতে হবে। এটি Prototype.js এর সাথে কাজ করে, তাই Prototype.js ও প্রয়োজন।
<!-- Prototype.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>
<!-- script.aculo.us -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>
এখানে, Prototype.js এবং script.aculo.us লাইব্রেরি দুটি CDN থেকে লোড করা হয়েছে। এই দুটি লাইব্রেরি লোড হওয়ার পর আপনি Drag and Drop কার্যকরী করতে পারবেন।
ধাপ ২: HTML এলিমেন্ট তৈরি করা
এখন, আপনার HTML পৃষ্ঠায় কিছু ড্র্যাগযোগ্য এলিমেন্ট তৈরি করতে হবে এবং এগুলির জন্য draggable বৈশিষ্ট্য সক্ষম করতে হবে।
<div id="drag_me" style="width: 100px; height: 100px; background-color: lightblue; text-align: center; line-height: 100px; border: 2px solid #000;">
Drag Me!
</div>
<div id="drop_area" style="width: 200px; height: 200px; background-color: lightgreen; margin-top: 20px;">
Drop Here
</div>
এখানে, #drag_me হল ড্র্যাগযোগ্য এলিমেন্ট এবং #drop_area হল যেখানে ড্র্যাগ করা আইটেমটি ড্রপ হবে।
ধাপ ৩: Drag and Drop ফাংশনালিটি যোগ করা
এখন, script.aculo.us লাইব্রেরি ব্যবহার করে Drag and Drop ফাংশনালিটি যোগ করতে হবে। Draggable ক্লাসটি এলিমেন্টকে ড্র্যাগযোগ্য করতে ব্যবহৃত হয় এবং Droppable ক্লাসটি ড্রপ করা এলিমেন্টের জন্য ব্যবহৃত হয়।
document.observe("dom:loaded", function() {
new Draggable('drag_me'); // এটি drag_me এলিমেন্টটিকে ড্র্যাগযোগ্য করে তোলে
new Droppable('drop_area', {
onDrop: function(element) {
alert('Item Dropped!');
element.style.backgroundColor = 'orange'; // ড্রপ করার পরে এলিমেন্টের ব্যাকগ্রাউন্ড পরিবর্তন
}
}); // drop_area তে ড্রপ করা এলিমেন্টের জন্য ফাংশন
});
এখানে, Draggable ক্লাসটি ব্যবহার করে drag_me এলিমেন্টটিকে ড্র্যাগযোগ্য করে তোলা হয়েছে এবং Droppable ক্লাসটি ব্যবহার করে drop_area এলিমেন্টে ড্রপ ইভেন্ট পরিচালনা করা হয়েছে।
ফিচার কনফিগারেশন এবং কাস্টমাইজেশন
script.aculo.us লাইব্রেরিতে Draggable এবং Droppable এলিমেন্টের উপর বিভিন্ন কাস্টম অপশন সেট করা যায়, যেমন:
onStart: ড্র্যাগ শুরু হলে একটি কাস্টম ফাংশন চালানোর জন্য।onEnd: ড্র্যাগ শেষ হলে একটি কাস্টম ফাংশন চালানোর জন্য।onDrag: ড্র্যাগিং অবস্থায় এলিমেন্টের পজিশন ট্র্যাক করতে।
অতিরিক্ত উদাহরণ:
document.observe("dom:loaded", function() {
new Draggable('drag_me', {
onStart: function(event, element) {
element.setStyle({ backgroundColor: 'yellow' }); // ড্র্যাগ শুরু হলে ব্যাকগ্রাউন্ড রঙ পরিবর্তন
},
onEnd: function(event, element) {
element.setStyle({ backgroundColor: 'lightblue' }); // ড্র্যাগ শেষ হলে ব্যাকগ্রাউন্ড রঙ ফিরিয়ে আনা
}
});
new Droppable('drop_area', {
onDrop: function(element) {
alert('Item Dropped!');
element.setStyle({ backgroundColor: 'lightgreen' }); // ড্রপ করার পর এলিমেন্টের ব্যাকগ্রাউন্ড পরিবর্তন
}
});
});
এখানে, onStart এবং onEnd ফাংশনগুলো ব্যবহৃত হয়েছে, যা ড্র্যাগ শুরু এবং শেষ হওয়ার সময় উপাদানের স্টাইল পরিবর্তন করবে।
সারাংশ
script.aculo.us এর মাধ্যমে Drag and Drop ইভেন্ট হ্যান্ডলিং সহজেই করা যায়। আপনি Draggable এবং Droppable ক্লাসগুলি ব্যবহার করে ড্র্যাগ এবং ড্রপ ফিচার যুক্ত করতে পারেন। script.aculo.us ড্র্যাগ এবং ড্রপ অপারেশনগুলিকে কাস্টমাইজ এবং ইন্টিগ্রেট করার জন্য শক্তিশালী ইভেন্ট ফাংশনালিটি প্রদান করে, যা আপনাকে ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি ওয়েব পেজ তৈরি করতে সাহায্য করবে।
Read more
