การขนานอุปกรณ์ HTML5

কোডওয়েড়সি.কম চিত্রটিকে আকৃতির মধ্যে খিস্কিয়ে নিন।

ড্রপ

ড্রপ (Drag and Drop) একটি সাধারণ বৈশিষ্ট্য: আপনি কোনও জিনিসকে ধরে অন্য স্থানে ট্রেজ করতে পারেন。

ড্রপ (Drag and Drop) একটি সাধারণ বৈশিষ্ট্য: কোনও ইলেকট্রনই ট্রেজবল করা যায়。

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

টেবিলের সংখ্যা ড্রপ সম্পর্কে পূর্ণ সমর্থন করা প্রথম ব্রাউজার সংস্করণকে নির্দেশ করে。

API
ড্রপ 4.0 9.0 3.5 6.0 12.0

HTML ড্রপ উদাহরণ

এখানে ড্রপ সম্পর্কিত একটি সহজ উদাহরণ দেওয়া হল:

উদাহরণ

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>

আপনার নিজেই চেষ্টা করুন

এটা হয়তো কিছুটা জটিল দেখায়, কিন্তু আমরা ট্রেজ এবং ড্রপ ইভেন্টের সকল ভিন্ন অংশকে অধ্যয়ন করি。

ইলেকট্রনকে ট্রেজবল করা

প্রথমত: একটি ইলেকট্রনকে ট্রেজবল করার জন্য, draggable অ্যাট্রিবিউট ট্রু করুন:

<img draggable="true">

ড্রপ এবং ট্রেজ - ondragstart এবং setData()

তারপর, ইলেকট্রনটি ট্রেজ করা হলে ঘটবে কী ঘটনা নির্ধারণ করে。

এই উপরোক্ত উদাহরণে, ondragstart অ্যাট্রিবিউট একটি drag(event) ফাংশন কল করে, যা কী ডাটা ট্রেজ করা হবে নির্ধারণ করে。

dataTransfer.setData() মথুর ডাটা টাইপ এবং মান নির্ধারণ করে:

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

এই উদাহরণে, ডাটা টাইপ "text" এবং মান হল এই ট্রেজবল ইলেকট্রনের id ("drag1")。

কোথায় ড্রাগ - ondragover

ondragover ইভেন্ট বলা হয়, ড্রাগকৃত ডেটা কোথায় পতিত করা যাবে

ডিফল্টভাবে, ডেটা/ইলেমেন্টটি অন্য ইলেমেন্টের মধ্যে পতিত করা যায় না।ড্রাগ ড্রপ প্রক্রিয়াকে বাস্তবায়িত করতে, আমরা ইলেমেন্টের এই ডিফল্ট প্রক্রিয়াকরণকে বাধা দিতে হবে。

এই কাজটি ondragover ইভেন্টের event.preventDefault() মথোদ্দতা দ্বারা করা হয়:

event.preventDefault()

নিষ্ক্রমণ - ondrop

ড্রাগ ডেটা মুক্ত করার সময় drop ইভেন্ট ঘটে

উপরোক্ত উদাহরণে, ondrop অ্যাট্রিবিউট একটি ফাংশনকে বলে দেয়, drop(event)：

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

কোড ব্যাখ্যা:

  • preventDefault() বাহার করে ডেটা ব্রাউজারের ডিফল্ট প্রক্রিয়াকরণকে বাধা দিন (drop ইভেন্টের ডিফল্ট আচরণ লিঙ্ক হিসাবে খোলা)
  • dataTransfer.getData() মথোদ্দতা দ্বারা ড্রাগ ডেটা পাওয়া যায়।এই মথোদ্দতা সেটডাটা() মথোদ্দতা দ্বারা সেট করা যেকোন ডেটা টাইপ রয়েছে
  • ড্রাগ ডেটা ড্রাগ ইলেমেন্টের id ("drag1")
  • ড্রাগ ইলেমেন্টকে ড্রপ ইলেমেন্টের মধ্যে যোগ করুন

আরও ইনস্ট্যান্স

চিত্রটিকে আনুমোদন করে দুইবার খিস্কিয়ে নিতে

দুই <div> ইলেমেন্টের মধ্যে চিত্রটিকে আনুমোদন করে দুইবার খিস্কিয়ে নিতে কিভাবে:

কোডওয়েড়সি.কম চিত্রটিকে আকৃতির মধ্যে খিস্কিয়ে নিন।

আপনার নিজেই চেষ্টা করুন