HTML DOM DragEvent

HTML DOM DragEvent হল এক ধরনের ইভেন্ট যা নির্বাচিত পাঠ্য টেনে এনে ফেলে দেওয়া হলে তা কার্যকর করা হয়। এই ইভেন্টটি HTML5 এ প্রবর্তিত হয়েছিল৷

৷

সম্পত্তি

HTML DOM DragEvent -

-এর জন্য নিম্নোক্ত সম্পত্তি

সম্পত্তি	বিবরণ
ডেটা ট্রান্সফার	ব্যবহারকারীর দ্বারা টেনে আনা বা ফেলে দেওয়া ডেটা ফেরত দিতে৷

সিনট্যাক্স

DragEvent -

-এর জন্য সিনট্যাক্স নিচে দেওয়া হল

Object.DragEventType= function_name;

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

ইভেন্টগুলি

DragEvent অবজেক্ট-

-এর অন্তর্গত ইভেন্টের ধরনগুলো নিচে দেওয়া হল

ইভেন্ট	বিবরণ
অনড্র্যাগ	যখন একটি উপাদান টেনে আনা হয় তখন ঘটে।
ondragend	ব্যবহারকারীর দ্বারা উপাদানটি টেনে আনা শেষ হলে ঘটে।
ondragenter	ঘটবে যখন উপাদানটি টেনে আনার পর ড্রপ টার্গেটে প্রবেশ করে।
ondragleave	ঘটবে যখন উপাদানটি টেনে আনার সময় ড্রপ টার্গেট ছেড়ে চলে যায়৷
ondragover	ঘটবে যখন উপাদানটি টেনে আনার সময় ড্রপ টার্গেটের উপরে থাকে।
ondragstart	যখন ব্যবহারকারী একটি উপাদান টেনে আনতে শুরু করে তখন ঘটে।
অনড্রপ	ঘটবে যখন উপাদানটি টেনে আনার পর ড্রপ টার্গেটে ড্রপ করা হয়।

উদাহরণ

<!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 example</h2>
<div class="DivDrop">
<span id="spanDrag" draggable="true">Drag This!</p>
</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>

আউটপুট

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

HTML DOM DragEvent

টেনে আনলে "এটিকে টেনে আনুন!" পাঠ্য। এটি "টেক্সট টানুন" এ পরিবর্তিত হবে।

HTML DOM DragEvent

দ্বিতীয় ডিভ-

-এ "ড্র্যাগ টেক্সট" ড্রপ করার সময়

HTML DOM DragEvent

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

আমরা প্রথমে একই শ্রেণীর নাম "DivDrop" সহ দুটি div উপাদান তৈরি করেছি যা আমাদের উভয়ের জন্য একটি সাধারণ CSS শৈলী ব্যবহার করার অনুমতি দেবে। প্রথম

উপাদানটির ভিতরে একটি উপাদান রয়েছে যা আমরা পরে টেনে আনব −

.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!</p>
</div>
<div class="DivDrop"></div>

তারপরে আমরা বেশ কয়েকটি ফাংশন তৈরি করেছি যা একটি ইভেন্ট ঘটলে কার্যকর করবে। প্রথম ফাংশন অনড্রাগস্টার্ট ইভেন্টের সাথে যুক্ত। যখন ব্যবহারকারী পাঠ্য টেনে আনতে শুরু করে তখন এই ইভেন্টটি ফায়ার হয়.. ফাংশনে setData() পদ্ধতি রয়েছে যা ড্র্যাগ ডেটা টাইপ এবং ডেটা নেয়। এখানে টাইপ হল "টেক্সট" এবং ডেটা হল এলিমেন্ট আইডি।

ট্যাগের সাথে যুক্ত আইডি খুঁজতে আপনার event.target.id ব্যবহার করা উচিত। আমরা এখানে সরলতার জন্য নামটি ব্যবহার করেছি −

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";
};

ondragover ইভেন্টের সাথে যুক্ত ফাংশনটি dragover এ ঘটবে এমন ডিফল্ট ক্রিয়া বন্ধ করতে event.preventDefault() পদ্ধতি ব্যবহার করে। ড্র্যাগওভার ইভেন্টটি পর্যায়ক্রমে ফায়ার হয় যখন টেনে আনা উপাদানটি উদ্দেশ্যমূলক লক্ষ্যের উপরে থাকে -

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

অনড্রপ ইভেন্টের সাথে যুক্ত ফাংশন ডিফল্ট অ্যাকশন ঘটতে বাধা দেয়। তারপর এটি পরীক্ষা করে যে লক্ষ্যবস্তুটি দ্বিতীয়

উপাদান কিনা। এটি কোন উপাদানটি পরীক্ষা না করেই এটি পৃষ্ঠার যে কোনও জায়গায় পাঠ্য রাখতে পারে যা ওয়েব পৃষ্ঠার চেহারাকে প্রভাবিত করতে পারে৷

তারপর আমরা getData() পদ্ধতি ব্যবহার করে "টেক্সট" টাইপের জন্য ড্র্যাগ ডেটা পাই। আমাদের ক্ষেত্রে সেই উপাদানটি হবে এবং তারপরে আমরা উপাদানটিকে দ্বিতীয় ডিভের চাইল্ড হিসাবে যুক্ত করি এবং পরিবর্তনগুলি প্রতিফলিত করতে এর ভিতরের পাঠ্য, পটভূমির রঙ পরিবর্তন করি -

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";
   }