X

X

X

HTML5 এ Drag ‌ও Drop


Drag ও Drop

Drag ও drop খুবই জনপ্রিয় এবং চমৎকার ফিচার। এটি দিয়ে একটি অবজেক্ট একস্থান থেকে অন্যস্থানে স্থানান্তর করা হয়।

HTML5 এ এই ফিচারটি বিল্ট-ইন ফিচার। যেকোনো ইলামেন্টকে স্থানান্তর করা যায়।


Browser সাপোর্ট

The numbers in the table specify the first browser version that fully supports Drag and Drop.

API
Drag ‌ও Drop 4.0 9.0 3.5 6.0 12.0

HTML Drag ও Drop -এর উদাহরণ

নিচে Drag ও Drop -এর খুব সাধারণ একটি উদাহরণ দেখানো হলো:

Code Example

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style>
<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>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


একটু জটিল মনে হলেও চলুন এর সবগুলো ফিচার দেখে নেই।


একটি Element কে Draggable করার পদ্ধতি

সর্বপ্রথমে: কোনো ইলামেন্ট কে Draggable করার জন্য এটিতে draggable এট্রিবিউট সেট করতে হবে, এবং এর মান true সেট করতে হবে।

<img draggable=”true”>

Drag করার পদ্ধতি – ondragstart ও setData() এর ব্যবহার

উপরের উদাহরণে, ondragstart attribute একটি ফাংশনকে কল করে, যেটি দিয়ে দিয়ে বলা হয় ড্র্যাগ ডাটা দিয়ে কি করতে হবে।
dataTransfer.setData() method দিয়ে ডাটা টাইপ ও এর value সেট করা হয়।

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

এখানে ডাটা টাইপ হচ্ছে টেক্সট এবং value হচ্ছে draggable ইলামেন্ট এর id ।


ondragover হওয়ার পর কোথায় ড্র্যাগ করতে হবে

ondragover event দিয়ে বর্ণনা করা হয় কোথায় ড্র্যাগড ডাটা ড্রপ হবে।

সাধারণত, data/elements সরাসরি কোনো ইলামেন্টের ভেতরে ড্রপ হতে পারবে না। ড্রপ করার জন্য এই ডিফল্ট ফিচারটি আমাদের পরিবর্তন করতে হবে।

এটি করা হয় ondragover event এক্সিকিউট হওয়ার পর event.preventDefault() method কে কল করার মাধ্যমে :

event.preventDefault()

ondrop ইভেন্টের মাধ্যমে ইলামেন্ট ড্রপ করুন

যখন ইলামেন্ট ড্রপ করা হয় drop event এক্সিকিউট হয়। উপরের উদাহরণে ondrop attribute একটি ফাংশনকে কল করে।

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

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

  • preventDefault() কল করে ব্রাউজারের ডিফল্ট কার্যক্রাম আলোচ্য ইলামেন্টে বন্ধ করা হয়।
  • dataTransfer.getData() method ব্যবহার করে ড্র্যাগড ডাটা গ্রহণ করতে হবে।
  • dragged data হচ্ছে dragged element (“drag1”) এর আইডি।
  • ড্রপ ইলামেন্টে ড্র্যাগ ইলামেন্ট Append বা সংযুক্ত করতে হবে।

আরও কিছু উদাহরণ

Code Example

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
    float: left;
    width: 100px;
    height: 35px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
</style>
<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>

<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।