নিচে WebsSchool.com এর লোগোটিকে প্রথম আয়তক্ষেত্র থেকে দ্বিতীয় আয়তক্ষেত্রে টেনে নিন।
ড্রাগ এবং ড্রপ এর অর্থ হল মাউস পয়েন্টার ব্যবহার করে কোন একটি অবজেক্টকে কোন এক স্থান থেকে টেনে অন্য কোন একটি স্থানে নিয়ে গিয়ে স্থাপন করা। এইচটিএমএল ৫.০ এর স্ট্যান্ডার্ড অনুসারে এইচটিএমএল এর সকল এলিমেন্টকে ড্রাগ এবং ড্রপ করা যাবে।
এইচটিএমএল ড্রাগ এবং ড্রপ সম্পর্কে আরও জানতে W3C এর PF/ARIA/BestPractices/DragDrop ওয়েব পেজটি ব্রাউজ করুন।
টেবিলে প্রদর্শিত সংখ্যাগুলো ব্রাউজারের সেই প্রথম সংস্করণটি নির্দেশ করে যেগুলো সম্পূর্ণ ভাবে ড্রাগ এবং ড্রপ সমর্থন বা 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 এট্রিবিউটে drag(event) নামে একটি ফাংশনকে কল করে data ড্রাগ করার মত অবস্থা তৈরি করা হয়েছে। dataTransfer.setData() মেথড ব্যবহার করে তথ্য বা data টাইপ এবং মান নির্দেশ করা হয়েছে। নিচে এর একটি উদাহরণ দেখুন।
function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }
এখানে তথ্য বা data টাইপ "text" নির্ধারণ করা হয়েছে এবং ড্রাগ করার যোগ্য এলিমেন্টের "drag1" আইডিকে টার্গেট রুপে নির্দেশ করা হয়েছে।
ondragover ইভেন্টটি টেনে নিয়ে যাওয়া তথ্য বা data কোথায় ফেলে দেওয়া যায় তা নির্দিষ্ট করে।
dfefault ভাবে, কোন এইচটিএমএল এলিমেন্ট বা data কে অন্য কোন এইচটিএমএল এলিমেন্টের উপর রাখা যাবে
না। এজন্য কোন এলিমেন্টকে অন্য
কোন একটি এলিমেন্টের উপর স্থাপন করতে হলে প্রথমে তার পূর্ব-নির্ধারিত বা dfefault হ্যান্ডলিংকে বন্ধ করতে হবে।
event.preventDefault() মেথড ব্যবহার করে এটা করা যায়। এই মেথডকে ondragover ইভেন্টে
কল করা যায়,
ondragover ইভেন্ট ব্যবহার করে কোন এইচটিএমএল এলিমেন্ট বা data কে ড্রপ করার স্থান নির্দেশ করা হয়।
নিচে এর জন্য উদাহরণ দেখুন।
event.preventDefault()
ড্রাগ করা এলিমেন্ট বা 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>