এইচটিএমএল(৫) ড্রাগ এবং ড্রপ- HTML5 Drag & Drop
ড্রাগ এবং ড্রপ মানে হচ্ছে একটি অবজেক্টকে এক স্থান থেকে টেনে অন্য স্থানে নিয়ে যাওয়া। এইচটিএমএল(৫) এর স্ট্যান্ডার্ড অনুযায়ী সকল এলিমেন্টকে ড্রাগ এবং ড্রপ করা যাবে।
ব্রাউজার সাপোর্ট
বর্তমান সময়ের অধিকাংশ ব্রাউজারেই জিওলোকেশন সাপোর্ট করে। ক্রোম ৪.০, ইন্টারনেট এক্সপ্লোরার ৯.০, ফায়ারফক্স ৩.৫, সাফারি ৬.০ এবং অপেরা ১২.০ ভার্সন থেকে ড্রাগ এবং ড্রপ সাপোর্ট করে।
এইচটিএমএল ড্র্যাগ এবং ড্রপ উদাহরণ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল ড্র্যাগ এবং ড্রপ </title>
<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> এর ইমেজটি আয়তক্ষেত্রের মধ্যে টানুনঃ</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="../images/satt.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
ফলাফল
উদাহরণের বর্ণনা
সর্বপ্রথম একটি এলিমেন্টকে ড্রাগ করার ক্ষমতা দেওয়ার জন্য ঐ এলিমেন্টে draggable এট্রিবিউটের ভ্যালু true সেট করতে হবেঃ
<img draggable="true">
ondragstart এবং setData()
উপরের উদাহরণে, ondragstart এট্রিবিউট drag(event) নামে একটি ফাংশনকে কল করে ডেটা ড্রাগ করার ক্ষমতা নির্ধারণ করে।
dataTransfer.setData() মেথড ডেটার টাইপ এবং ভ্যালু সেট করেঃ
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
এই ক্ষেত্রে, ডেটা টাইপ "text" সেট করা হয়েছে এবং ড্রাগ করার যোগ্য এলিমেন্টের আইডিকে("drag1") আমরা টার্গেট হিসেবে সেট করেছি।
ondragover ইভেন্ট
ডিফল্টভাবে, কোন এলিমেন্ট/ডেটাকে অন্য এলিমেন্টের উপর রাখা যায় না। একটি এলিমেন্টকে কোন এলিমেন্টের উপর রাখতে হলে প্রথমে তার ডিফল্ট হ্যান্ডলিংকে রোধ করতে হবে।
আমরা event.preventDefault() মেথড ব্যবহার করে এটি করতে পারি। এই মেথডকে আমরা ondragover ইভেন্টে কল করতে পারি, ondragover ইভেন্টটি ডেটাকে ড্রপ করার স্থান নির্দেশ করে।
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() মেথডের মাধ্যমে ব্রাউজারের ডিফল্ট হ্যান্ডলিংকে রোধ করা হয়েছে। ব্রাউজারে কোন ডেটাকে ড্রপ করা হলে ডিফল্টভাবে এটি লিংক হিসেবে নতুন উইন্ডোতে ওপেন হয়। dataTransfer.getData() মেথডের মাধ্যমে ড্রাগ করা ডেটাকে পাওয়া যায়। এই মেথড setData() মেথডে সেট করা একই টাইপের ডেটাকে পাবে। সবশেষে ড্রাগকৃত এলিমেন্টকে ড্রপ এলিমেন্টে যোগ করা হয়।
দুইটি DIV এলিমেন্টের মধ্যে ড্রাগ এবং ড্রপ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
<style>
#div1, #div2
{float:left; width:100px; height:100px; margin:10px;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>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="../../images/satt_a.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="95" height="95">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
ফলাফল