HTML ondrag ইভেন্ট অ্যাট্রিবিউটটি ট্রিগার হয় যখন ইউজার একটি HTML এলিমেন্ট ড্র্যাগ করে একটি HTML ডকুমেন্টে। HTML ইমেজ এবং লিংক এলিমেন্ট ডিফল্টভাবে ড্র্যাগেবল তাই তাদের ওপর ondrag অ্যাট্রিবিউট স্পেসিফাই করার প্রয়োজন নেই।
সিনট্যাক্স
নিচে সিনট্যাক্স দেওয়া হলো:
<tagname ondrag=”script”></tagname>
উদাহরণ
HTML ondrag ইভেন্ট অ্যাট্রিবিউটের একটি উদাহরণ দেখা যাক:
<!DOCTYPE html> <html> <head> <style> body { color: #000; height: 100vh; background-color: #FBAB7E; background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%); text-align: center; } .drop-target { display: inline-block; width: 150px; height: 150px; border: 2px solid #FFF; margin: 1rem; vertical-align: middle; padding: 20px; } .circle { background: #db133a; height: 40px; width: 40px; border-radius: 50%; } .show { color: #fff; font-size: 1.2rem; } </style> </head> <body> <h1>HTML ondrag ইভেন্ট অ্যাট্রিবিউট ডেমো</h1> <div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)"> <p ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" class="circle"></p> </div> <div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <p>এখন লাল বৃত্তটি ড্র্যাগ অ্যান্ড ড্রপ করার চেষ্টা করুন</p> <div class="show"></div> <script> function dragStart(event) { event.dataTransfer.setData("Text", event.target.id); } function dragging(event) { document.querySelector(".show").innerHTML = "বৃত্তটি ড্র্যাগ হচ্ছে"; } function allowDrop(event) { event.preventDefault(); } function drop(event) { event.preventDefault(); event.target.appendChild(document.querySelector('.circle')); document.querySelector(".show").innerHTML = "বৃত্তটি ড্রপ করা হয়েছে"; } </script> </body> </html>আউটপুট
এখন দুটি বক্সের মাঝপথে লাল বৃত্তটি ড্র্যাগ অ্যান্ড ড্রপ করার চেষ্টা করুন ondrag ইভেন্ট অ্যাট্রিবিউট কীভাবে কাজ করে তা পর্যবেক্ষণ করার জন্য।
