HTML DOM DragEvent

HTML DOM DragEvent একটি ইভেন্ট টাইপ যা নির্বাচিত টেক্সট ড্র্যাগ এবং ড্রপ করার সময় এক্সিকিউট হয়। এই ইভেন্ট HTML5-এ পরিচয় করানো হয়েছিল।

প্রপার্টি

HTML DOM DragEvent-এর প্রপার্টি:

সিনট্যাক্স

DragEvent-এর সিনট্যাক্স:

Object.DragEventType= function_name;

এখানে, function_name হলো সেই ফাংশন যা ইভেন্ট ঘটলে এক্সিকিউট করাতে চাই।

ইভেন্টস

DragEvent অবজেক্টের ইভেন্ট টাইপগুলো:

উদাহরণ

<!DOCTYPE html> <html> <head> <style>    .DivDrop {       float: left;       width: 100px;       height: 40px;       margin:10px;       border: 1px solid blue;       background-color:lightgreen;       font-weight:bold;    } </style> </head> <body> <h2>DragEvent উদাহরণ</h2> <div class="DivDrop"> <span id="spanDrag" draggable="true">Drag This!</span> </div> <div class="DivDrop"></div> <p id="Sample" style="clear:both"></p> <script>    document.ondragstart = function(event) {       event.dataTransfer.setData("Text", "spanDrag");       document.getElementById("spanDrag").innerText="drag Text";       document.getElementById("spanDrag").style.backgroundColor="lightgreen";    };    document.ondrag = function(event) {       document.getElementById("Sample").innerHTML = "Span element is being dragged";    };    document.ondragover = function(event) {       event.preventDefault();    };    document.ondrop = function(event) {       event.preventDefault();       if(event.target.className=="DivDrop"){          var txt = event.dataTransfer.getData("Text");          event.target.appendChild(document.getElementById(txt));          document.getElementById(txt).innerText="Dragged Text";          document.getElementById(txt).style.backgroundColor="lightyellow";          document.getElementById("Sample").innerHTML = "The span element is dropped";       }    }; </script> </body> </html>

আউটপুট

এটি নিচের আউটপুট তৈরি করবে:

“Drag This!” টেক্সট ড্র্যাগ করলে এটি “drag Text”-এ পরিবর্তন হবে।

দ্বিতীয় div-এ “drag Text” ড্রপ করলে:

উপরের উদাহরণে:

আমরা একই ক্লাস নেম “DivDrop” দিয়ে দুটি div এলিমেন্ট তৈরি করেছি যাতে উভয়ের জন্য একই CSS স্টাইল ব্যবহার করা যায়। প্রথম <div> এলিমেন্টে একটি <span> এলিমেন্ট আছে যা আমরা পরে ড্র্যাগ করব:

.DivDrop {    float: left;    width: 100px;    height: 40px;    margin:10px;    border: 1px solid blue;    background-color:lightgreen;    font-weight:bold; } <div class="DivDrop"> <span id="spanDrag" draggable="true">Drag This!</span> </div> <div class="DivDrop"></div>

তারপর আমরা ইভেন্ট ঘটলে এক্সিকিউট होने वाली বিভিন্ন ফাংশন তৈরি করেছি। প্রথম ফাংশন ondragstart ইভেন্টের সাথে জড়িত। এটি তখন ফায়ার করে যখন ইউজার টেক্সট ড্র্যাগ শুরু করে। ফাংশনে setData() মেথড আছে যা ড্র্যাগ ডেটা টাইপ এবং ডেটা নেয়। এখানে টাইপ “text” এবং ডেটা হলো <span> এলিমেন্টের id। আপনার event.target.id ব্যবহার করা উচিত <p> ট্যাগের id জানার জন্য। এখানে সহজতার জন্য নাম ব্যবহার করা হয়েছে:

document.ondragstart = function(event) {    event.dataTransfer.setData("Text", "spanDrag");    document.getElementById("spanDrag").innerText="drag Text";    document.getElementById("spanDrag").style.backgroundColor="lightgreen"; };

ondrag ইভেন্টের সাথে জড়িত ফাংশন <p> এলিমেন্টের টেক্সট “Span element is being dragged”-এ সেট করে innerHTML প্রপার্টি ব্যবহার করে। ondrag ইভেন্ট তখন ফায়ার করে যখন ইউজার টেক্সট ড্র্যাগ করছে:

Document.ondrag = function(event) {    document.getElementById("Sample").innerHTML = "Span element is being dragged"; };

ondragover ইভেন্টের সাথে জড়িত ফাংশন event.preventDefault() মেথড ব্যবহার করে ড্র্যাগওভারের ডিফল্ট অ্যাকশন বন্ধ করে। dragover ইভেন্ট পিরিয়ডিক্যালি ফায়ার করে যখন ড্র্যাগ করা এলিমেন্ট ইচ্ছিত টার্গেটের উপরে থাকে:

document.ondragover = function(event) {    event.preventDefault(); };

ondrop ইভেন্টের সাথে জড়িত ফাংশন ডিফল্ট অ্যাকশন বন্ধ করে। তারপর চেক করে যে ইচ্ছিত টার্গেট দ্বিতীয় <div> এলিমেন্ট কিনা। চেক না করলে টেক্সট পেজে যেকোনো জায়গায় প্লেস হয়ে যেতে পারে যা ওয়েব পেজের চেহারা ব-igie দিতে পারে।

তারপর getData() মেথড ব্যবহার করে “text” টাইপের জন্য ড্র্যাগ ডেটা পাওয়া যায়। সেটি আমাদের কেসে <span> এলিমেন্ট এবং সেটিকে দ্বিতীয় div-এ চাইল্ড হিসেবে অ্যাপেন্ড করা হয় এবং এর inner text, ব্যাকগ্রাউন্ড কালার পরিবর্তন করে পরিবর্তনগুলো প্রতিফলিত করা হয়:

document.ondrop = function(event) {    event.preventDefault();    if(event.target.className=="DivDrop"){       var txt = event.dataTransfer.getData("Text");       event.target.appendChild(document.getElementById(txt));       document.getElementById(txt).innerText="Dragged Text";       document.getElementById(txt).style.backgroundColor="lightyellow";       document.getElementById("Sample").innerHTML = "The span element is dropped";    }