Drag and Drop ইন্টারফেস হল এমন একটি ইন্টারঅ্যাকশন, যার মাধ্যমে ব্যবহারকারীরা একটি আইটেমকে (যেমন, ফাইল, ডিভ, বা টেক্সট) একটি স্থান থেকে অন্য স্থানে "ড্র্যাগ" এবং "ড্রপ" করতে পারে। HTML5 এ ড্র্যাগ এবং ড্রপ ইভেন্টগুলির জন্য নির্দিষ্ট ইভেন্টগুলি রয়েছে, যা ব্যবহারকারী ইন্টারঅ্যাকশনকে সঠিকভাবে ট্র্যাক এবং পরিচালনা করতে সাহায্য করে।
এই ইভেন্টগুলির মধ্যে প্রধান ইভেন্টগুলি হল:
- dragstart: যখন একটি ড্র্যাগ অপারেশন শুরু হয়।
- dragend: যখন ড্র্যাগ অপারেশন শেষ হয়।
- dragover: যখন একটি ড্র্যাগged আইটেম কোনও এলিমেন্টের উপরে চলে আসে।
- dragenter: যখন একটি ড্র্যাগged আইটেম একটি ড্রপ টার্গেটের উপর চলে আসে।
- dragleave: যখন একটি ড্র্যাগged আইটেম একটি ড্রপ টার্গেটের বাইরে চলে যায়।
- drop: যখন একটি ড্র্যাগged আইটেম ড্রপ টার্গেটের উপর ড্রপ করা হয়।
- dragenter এবং dragleave: ড্র্যাগged আইটেমের অবস্থান পরিবর্তনের জন্য ব্যবহৃত হয়।
ড্র্যাগ এবং ড্রপ ইভেন্ট হ্যান্ডলিং - ধাপগুলো
- ড্র্যাগ ইভেন্ট:
- ড্র্যাগ শুরু হওয়ার পর বিভিন্ন ইভেন্টগুলি যেমন
dragstart,dragover,dragenter, এবংdragleaveট্রিগার হয়। - dragstart ইভেন্টের মধ্যে আমরা ড্র্যাগged আইটেমটির ডেটা বা স্টেট সেট করতে পারি।
- ড্র্যাগ শুরু হওয়ার পর বিভিন্ন ইভেন্টগুলি যেমন
- ড্রপ ইভেন্ট:
- ড্র্যাগged আইটেমটি ড্রপ করার জন্য drop ইভেন্টটি ব্যবহার করা হয়।
- dragover ইভেন্টে আমরা ড্রপ টার্গেটের জন্য
event.preventDefault()কল করে ড্রপ করার অনুমতি প্রদান করি।
ধাপে ধাপে উদাহরণ
এখানে একটি সিম্পল ড্র্যাগ এবং ড্রপ অ্যাপ্লিকেশন তৈরি করা হয়েছে, যেখানে একটি ডিভ (div) এলিমেন্টকে একটি নির্দিষ্ট জায়গায় ড্র্যাগ এবং ড্রপ করা হয়।
HTML - Drag and Drop Interface
<!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 Example</title>
<style>
#dragItem {
width: 100px;
height: 100px;
background-color: skyblue;
text-align: center;
line-height: 100px;
cursor: move;
margin: 20px;
}
#dropZone {
width: 300px;
height: 300px;
border: 2px dashed #333;
text-align: center;
line-height: 300px;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="dragItem" draggable="true">ড্র্যাগ করুন</div>
<div id="dropZone">এখানে ড্রপ করুন</div>
<script>
const dragItem = document.getElementById("dragItem");
const dropZone = document.getElementById("dropZone");
// dragstart ইভেন্ট হ্যান্ডল করা
dragItem.addEventListener("dragstart", function(event) {
// ড্র্যাগged আইটেমের ডেটা সেট করা
event.dataTransfer.setData("text", event.target.id);
console.log("ড্র্যাগ শুরু হয়েছে");
});
// dragover ইভেন্ট হ্যান্ডল করা (ড্রপ টার্গেটে ড্র্যাগged আইটেমের উপর)
dropZone.addEventListener("dragover", function(event) {
event.preventDefault(); // ড্রপ করার অনুমতি দেওয়া
console.log("ড্র্যাগ করা হচ্ছে");
});
// dragenter ইভেন্ট হ্যান্ডল করা (ড্রপ টার্গেটে আইটেম প্রবেশ করছে)
dropZone.addEventListener("dragenter", function(event) {
console.log("ড্র্যাগged আইটেম ড্রপ টার্গেটে প্রবেশ করছে");
});
// dragleave ইভেন্ট হ্যান্ডল করা (ড্রপ টার্গেট থেকে আইটেম বের হয়ে যাচ্ছে)
dropZone.addEventListener("dragleave", function(event) {
console.log("ড্র্যাগged আইটেম ড্রপ টার্গেট থেকে বের হয়ে যাচ্ছে");
});
// drop ইভেন্ট হ্যান্ডল করা (ড্র্যাগged আইটেম ড্রপ করা হচ্ছে)
dropZone.addEventListener("drop", function(event) {
event.preventDefault(); // ডিফল্ট আচরণ বন্ধ করা
const data = event.dataTransfer.getData("text"); // ড্র্যাগged আইটেমের ডেটা পুনরুদ্ধার করা
const draggedElement = document.getElementById(data);
dropZone.appendChild(draggedElement); // ড্রপ করা আইটেমকে ড্রপ টার্গেটে যুক্ত করা
console.log("ড্রপ করা হয়েছে");
});
</script>
</body>
</html>
ব্যাখ্যা:
- draggable="true":
- এটি নির্দেশ করে যে,
#dragItemডিভটি ড্র্যাগযোগ্য।
- এটি নির্দেশ করে যে,
- dragstart ইভেন্ট:
- যখন ব্যবহারকারী ড্র্যাগিং শুরু করেন, তখন
dragstartইভেন্ট ট্রিগার হয়। এখানেevent.dataTransfer.setData()ব্যবহার করে ড্র্যাগged আইটেমের আইডি সেট করা হয়েছে।
- যখন ব্যবহারকারী ড্র্যাগিং শুরু করেন, তখন
- dragover ইভেন্ট:
- ড্র্যাগged আইটেম যখন ড্রপ টার্গেটের উপরে চলে আসে, তখন
dragoverইভেন্টটি ট্রিগার হয়। এটি ড্রপ করার অনুমতি দেয় (এবং ডিফল্ট আচরণ নিষিদ্ধ করেevent.preventDefault()কল করা হয়)।
- ড্র্যাগged আইটেম যখন ড্রপ টার্গেটের উপরে চলে আসে, তখন
- dragenter এবং dragleave ইভেন্ট:
dragenterইভেন্টটি ট্রিগার হয় যখন ড্র্যাগged আইটেম ড্রপ টার্গেটে প্রবেশ করে এবংdragleaveট্রিগার হয় যখন এটি ড্রপ টার্গেট থেকে বেরিয়ে যায়।
- drop ইভেন্ট:
- যখন ব্যবহারকারী ড্র্যাগged আইটেমটি ড্রপ টার্গেটে রাখেন, তখন
dropইভেন্টটি ট্রিগার হয়। এখানেevent.dataTransfer.getData()ব্যবহার করে ড্র্যাগged আইটেমের আইডি পুনরুদ্ধার করা হয় এবং তারপর তা ড্রপ টার্গেটে যুক্ত করা হয়।
- যখন ব্যবহারকারী ড্র্যাগged আইটেমটি ড্রপ টার্গেটে রাখেন, তখন
উন্নত বৈশিষ্ট্য:
- বিভিন্ন ধরনের ডেটা সমর্থন:
- আপনি
setData()এবংgetData()ব্যবহার করে বিভিন্ন ধরনের ডেটা (যেমন, টেক্সট, ছবি বা অন্যান্য) ট্রান্সফার করতে পারেন।
- আপনি
- Custom Styling:
- ড্র্যাগged আইটেমের অবস্থান বা প্রক্রিয়ায় কাস্টম স্টাইলিং যোগ করা সম্ভব, যেমন ড্র্যাগgingের সময় আইটেমের দৃশ্যমানতা পরিবর্তন করা।
ড্র্যাগ এবং ড্রপ ইভেন্টগুলি ব্যবহার করে আপনি ইন্টারেক্টিভ এবং ইউজার-ফ্রেন্ডলি অ্যাপ্লিকেশন তৈরি করতে পারেন। এই ইভেন্টগুলো Web API এর অংশ এবং ওয়েব অ্যাপ্লিকেশনগুলিতে ড্র্যাগgable উপাদানগুলি পরিচালনা করার জন্য ব্যবহৃত হয়। HTML5 এবং JavaScript এর মাধ্যমে এগুলি সহজেই বাস্তবায়িত করা যায়।
সারাংশ:
dragstart,dragover,dragenter,dragleave, এবংdropইভেন্টগুলি ড্র্যাগ এবং ড্রপ অপারেশন চালাতে ব্যবহৃত হয়।- ব্যবহারকারীকে ড্র্যাগ এবং ড্রপ ফিচার সরবরাহ করার মাধ্যমে ইন্টারেক্টিভ ওয়েব পৃষ্ঠা তৈরি করা সম্ভব।
Content added By
Read more
