এইচটিএমএল৫ ড্রাগ/ড্রপ - HTML5 Drag/Drop


নিচে WebsSchool.com এর লোগোটিকে প্রথম আয়তক্ষেত্র থেকে দ্বিতীয় আয়তক্ষেত্রে টেনে নিন।







ড্রাগ এবং ড্রপ

ড্রাগ এবং ড্রপ এর অর্থ হল মাউস পয়েন্টার ব্যবহার করে কোন একটি অবজেক্টকে কোন এক স্থান থেকে টেনে অন্য কোন একটি স্থানে নিয়ে গিয়ে স্থাপন করা। এইচটিএমএল ৫.০ এর স্ট্যান্ডার্ড অনুসারে এইচটিএমএল এর সকল এলিমেন্টকে ড্রাগ এবং ড্রপ করা যাবে।

এইচটিএমএল ড্রাগ এবং ড্রপ সম্পর্কে আরও জানতে W3C এর PF/ARIA/BestPractices/DragDrop ওয়েব পেজটি ব্রাউজ করুন।


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

টেবিলে প্রদর্শিত সংখ্যাগুলো ব্রাউজারের সেই প্রথম সংস্করণটি নির্দেশ করে যেগুলো সম্পূর্ণ ভাবে ড্রাগ এবং ড্রপ সমর্থন বা support করে।

API
ড্রাগ এবং ড্রপ 4.0 9.0 3.5 6.0 12.0


ড্রাগ এবং ড্রপ উদাহরণ

নিচে এইচটিএমএল কোড এবং জাভাস্ক্রিপ্ট ব্যাবহার করে ড্রাগ এবং ড্রপ এর একটি সাধারন উদাহরণ দেখুন।

উদাহরণ


<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>

কোড এডিটর


এই উদাহরণটি জটিল বলে মনে হতে পারে। তাই নিচে দেখুন ড্র্যাগ এবং ড্রপ এর সকল কোডগুলো আমরা বিভিন্ন স্তরে ভাগ করে বর্ণনা করেছি।


ড্রাগ করার মত এলিমেন্ট তৈরি

প্রথমে ড্রাগ করার মত কোন একটি এলিমেন্ট তৈরি করতে হবে অর্থাৎ একটি এলিমেন্টকে ড্রাগ করার ক্ষমতা প্রদান করতে হবে। এর জন্য ঐ এলিমেন্টে draggable এট্রিবিউটের মান true নির্ধারণ করতে হবে। নিচে এর জন্য একটি উদাহরণ দেখুন।

উদাহরণ


<img draggable="true">

কোড এডিটর



ondragstart এবং setData()

তারপর, এলিমেন্টটি টেনে নিয়ে গেলে কি হবে সেটা নির্ধারণ করতে হবে। এর জন্য ondragstart এট্রিবিউটে drag(event) নামে একটি ফাংশনকে কল করে data ড্রাগ করার মত অবস্থা তৈরি করা হয়েছে। dataTransfer.setData() মেথড ব্যবহার করে তথ্য বা data টাইপ এবং মান নির্দেশ করা হয়েছে। নিচে এর একটি উদাহরণ দেখুন।

উদাহরণ


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

কোড এডিটর


এখানে তথ্য বা data টাইপ "text" নির্ধারণ করা হয়েছে এবং ড্রাগ করার যোগ্য এলিমেন্টের "drag1" আইডিকে টার্গেট রুপে নির্দেশ করা হয়েছে।


ড্রপ করার স্থান নির্ধারণ - ondragover

ondragover ইভেন্টটি টেনে নিয়ে যাওয়া তথ্য বা data কোথায় ফেলে দেওয়া যায় তা নির্দিষ্ট করে।

dfefault ভাবে, কোন এইচটিএমএল এলিমেন্ট বা data কে অন্য কোন এইচটিএমএল এলিমেন্টের উপর রাখা যাবে না। এজন্য কোন এলিমেন্টকে অন্য কোন একটি এলিমেন্টের উপর স্থাপন করতে হলে প্রথমে তার পূর্ব-নির্ধারিত বা dfefault হ্যান্ডলিংকে বন্ধ করতে হবে।
event.preventDefault() মেথড ব্যবহার করে এটা করা যায়। এই মেথডকে ondragover ইভেন্টে কল করা যায়, ondragover ইভেন্ট ব্যবহার করে কোন এইচটিএমএল এলিমেন্ট বা data কে ড্রপ করার স্থান নির্দেশ করা হয়।

নিচে এর জন্য উদাহরণ দেখুন।

উদাহরণ


event.preventDefault()

কোড এডিটর



ড্রপ করা - ondrop

ড্রাগ করা এলিমেন্ট বা data কে যখন একটি এলিমেন্টের উপর রাখা হয় তখন drop ইভেন্ট নামে একটি ইভেন্ট ঘটে। drop ইভেন্ট ঘটলে ondrop এট্রিবিউট drop(event) নামে একটি ফাংশনকে কল করে। নিচে এর জন্য উদাহরণ দেখুন।

উদাহরণ


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

কোড এডিটর


উদাহরণের ব্যাখ্যা


ড্রাগ ও ড্রপ করা এলিমেন্ট ফেরত পাঠানো

দুইটি DIV এলিমেন্টের মধ্যে ড্রাগ এবং ড্রপ করা এলিমেন্টকে আগের স্থানে ফেরত পাঠানো খুব সহজ কাজ। নিচে এর একটি উদাহরণ দেখুন, যেখানে আমরা ড্রাগ ও ড্রপ করে আনা Websschool এর লোগোকে আবার পুনরায় আগের ড্রাগ করে আনা স্থানে ফেরত পাঠিয়েছি।

উদাহরণ


<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> 

কোড এডিটর