HTML Drag and Drop API

এইচটিএমএল ড্র্যাগ অ্যান্ড ড্রপ API আপনাকে একটি উপাদান টেনে আনতে এবং ড্রপ করতে দেয়।

পদ্ধতি:

নিচের জ্যাসিফ টিম ইমেজটিকে দ্বিতীয় আয়তক্ষেত্রে টেনে আনুন।

টেনে আনুন

ড্র্যাগ অ্যান্ড ড্রপ সবচেয়ে সাধারণ বৈশিষ্ট্য। এটি যখন আপনি একটি বস্তু "দখল" এবং এটি অন্য অবস্থানে টেনে আনে।

ব্রাউজার সমর্থন

সারণীতে থাকা সংখ্যাগুলি প্রথম ব্রাউজার সংস্করণটিকে উপস্থাপন করে যা সম্পূর্ণরূপে টেনে আনুন এবং ড্রপ সমর্থন করে৷

API	Chrome	Edge	Firefox	Safari	Opera
Drag and Drop	4.0	9.0	3.5	6.0	12.0

এইচটিএমএল ড্র্যাগ অ্যান্ড ড্রপ এপিআই উদাহরণ

নীচের উদাহরণটি একটি সাধারণ ড্র্যাগ এবং ড্রপ উদাহরণ:

উদাহরণ

<!DOCTYPE HTML>
<html>
<head>
<script>
function dragstartHandler(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function dragoverHandler(ev) {
  ev.preventDefault();
}

function dropHandler(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>

<img id="img1" src="img_logo.gif" draggable="true" ondragstart="dragstartHandler(event)" width="336" height="69">

</body>
</html>

এটি জটিল শোনাতে পারে, তবে আসুন একটি ড্র্যাগ এবং ড্রপ ইভেন্টের বিভিন্ন অংশ দেখি।

একটি উপাদান টেনে আনা যায়

প্রথম: একটি উপাদান টেনে আনার জন্য,draggableবৈশিষ্ট্যtrueএতে সেট করুন:

উদাহরণ

<img id="img1" draggable="true">

বা:

উদাহরণ

<p id="p1" draggable="true">টেনে আনা যায় এমন পাঠ্য</p>৷

কি টেনে আনতে হবে - ondragstart এবং setData()

তারপরে, উপাদানটি টেনে আনলে কী ঘটবে তা নির্দিষ্ট করুন।

উপরের উদাহরণে,<img>অঙ্গেরondragstartবৈশিষ্ট্য হল একটি ফাংশন (dragstartHandler(ev)) কল, যা নির্দিষ্ট করে কোন ডেটা টানতে হবে।

dataTransfer.setData()পদ্ধতিটি ডেটা টাইপ এবং ডেটার মান সেট করে যা টানা হবে:

উদাহরণ

function dragstartHandler(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

এই ক্ষেত্রে, ডেটা টাইপ হল "টেক্সট" এবং মান হল টেনে আনা যায় এমন উপাদানের আইডি ("img1")।

কোথায় ছেড়ে যাবেন - অনড্রাগোভার

<div>অঙ্গেরondragoverবৈশিষ্ট্য হল একটি ফাংশন (dragoverHandler(ev)) কল, যেখানে টেনে আনা ডেটা ড্রপ করা যেতে পারে তা নির্দিষ্ট করে।

ডিফল্টরূপে, ডেটা/উপাদানগুলি অন্য উপাদানগুলিতে ছেড়ে দেওয়া যাবে না। একটি প্রকাশের অনুমতি দিতে, আমাদের অবশ্যই উপাদানটির ডিফল্ট পরিচালনাকে সীমাবদ্ধ করতে হবে।

এইondragoverঅনুষ্ঠানের জন্যpreventDefault()এই পদ্ধতিটি কল করে করা হয়:

উদাহরণ

function dragoverHandler(ev) {
  ev.preventDefault();
}

অনড্রপ - অনড্রপ

যখন টেনে আনা ডেটা ড্রপ করা হয়, তখন কdropঘটনা ঘটে।

উপরের উদাহরণে,<div>অঙ্গেরondropবৈশিষ্ট্যdropHandler(event)ফাংশন কল করা:

উদাহরণ

function dropHandler(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

কোড বর্ণনা:

ব্রাউজার ডিফল্ট ডেটা হ্যান্ডলিং প্রতিরোধ করতেpreventDefault()কল করুন (ডিফল্ট হিসাবে রেখে দিলে একটি লিঙ্ক হিসাবে খোলে)
dataTransfer.getData()পদ্ধতির সাথে টানা ডেটা পান। এবারsetData()পদ্ধতি একই ধরনের কোনো ডেটা সেট ফিরিয়ে দেবে
যে ডেটা টেনে আনতে হবে সেটি হল টেনে আনা উপাদানটির আইডি ("img1")
ড্রপ করা উপাদানের সাথে টেনে আনা উপাদান সংযুক্ত করুন

ঘটনা টেনে আনুন

dragstart

যখন উপাদানটি টেনে আনতে শুরু করে

drag

যখন উপাদানটি টেনে আনা হয়

dragenter

যখন টেনে আনা উপাদানটি জালের মধ্যে প্রবেশ করে

dragover

যখন টেনে আনা উপাদানটি জালের উপরে থাকে

dragleave

যখন টেনে আনা উপাদানটি জাল ছেড়ে যায়

drop

যখন টেনে আনা উপাদানটি মুক্তি পায়

dragend

ড্র্যাগ অপারেশন সম্পূর্ণ হলে

ইন্টারেক্টিভ অনুশীলন

নির্দেশাবলী:

নিচের "টার্গেট এরিয়া" এ "ড্র্যাগ অ্যান্ড ড্রপ এলিমেন্ট" টেনে আনুন।

ড্র্যাগ এবং ড্রপ উপাদান

লক্ষ্য এলাকা

ব্যবহারিক নোট:

একটি টেনে আনা যায় এমন উপাদান উৎস এলাকায় ফিরে যেতে পারে। পুরো প্রক্রিয়াটি পর্যবেক্ষণ করা হয়।

আরো উদাহরণ

উদাহরণ: <h1> উপাদানটিকে <div> উপাদানে টেনে আনুন

<script>
function dragstartHandler(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function dragoverHandler(ev) {
  ev.preventDefault();
}

function dropHandler(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>

<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>

<h1 id="h1" draggable="true" ondragstart="dragstartHandler(event)">JassifTeam.com</h1>

উদাহরণ: একটি <a> উপাদানকে একটি <div> এলিমেন্টে টেনে আনা এবং ড্রপ করা

<script>
function dragstartHandler(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function dragoverHandler(ev) {
  ev.preventDefault();
}

function dropHandler(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>

<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>

<a id="link1" href="https://jassifteam.com" draggable="true" ondragstart="dragstartHandler(event)">JassifTeam.com</a>

অনুশীলন করুন

❓একটি উপাদানকে টেনে আনার জন্য নিচের কোন বৈশিষ্ট্য ব্যবহার করা হয়?

movable="true"

✗ ভুল! "movable" একটি বৈধ HTML বৈশিষ্ট্য নয়

draggable="true"

✓ ঠিক আছে! draggable="true" একটি উপাদানকে টেনে আনার যোগ্য করতে ব্যবহৃত হয়

drag="enabled"

✗ ভুল! "ড্র্যাগ" একটি বৈধ HTML বৈশিষ্ট্য নয়

পূর্ববর্তী পরবর্তী