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



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




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

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


ব্রাউজার সমর্থন বা 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 ইভেন্ট। এই ইভেন্ট ঘটলে ondrop এট্রিবিউট drop(event) নামের একটি ফাংশনকে কল করে। নিচে এর কোড দেখুন।

কোড দেখুন

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


কোড এর ব্যাখ্যা

এখানে preventDefault() মেথডের মাধ্যমে ব্রাউজারের স্বয়ংক্রিয় বা default নিয়ন্ত্রণ রোধ করা হয়েছে। ব্রাউজারে কোন এলিমেন্ট বা data কে ড্রপ করা হলে স্বয়ংক্রিয় বা default ভাবে এটি লিংক হিসেবে নতুন উইন্ডোতে চালু বা open হয়।

dataTransfer.getData() মেথডের মাধ্যমে ড্রাগ করা এলিমেন্ট বা data পাওয়া যায়। এই মেথড setData() মেথডে নির্ধারণ করা একই ধরনের সকল তথ্য ফিরিয়ে দেয়।

ড্রাগ তথ্য বা data হল ড্রাগ করা এলিমেন্টের আইডি ("drag1", সবশেষে ড্রাগকৃত এলিমেন্টকে ড্রপ এলিমেন্টে যোগ করা হয়।


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

দুইটি 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>









এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.