অনড্র্যাগলেভ ইভেন্ট
বিবরণ ও ব্যবহার
যখন ট্র্যাগকর্মী ইলেকট্রনমূলক এলাকা বা টেক্সট সিলেকশন প্রত্যাহার করা হয় তখন ondragleave ইভেন্ট ঘটে
ondragenter এবং ondragleave ইভেন্ট ব্যবহারকারীদেরকে একটি ট্র্যাগকর্মী ইলেকট্রনমূলক এলাকা যখন প্রত্যাহার করা হয় তখন বা যখন এটি প্রত্যাহার করা হয় তখন কীভাবে বোঝা যায় তা জানাতে সাহায্য করে। উদাহরণস্বরূপ, যখন ট্র্যাগকর্মী ইলেকট্রনমূলক এলাকা প্রত্যাহার করা হয় তখন পিছনের রঙ সজ্জিত করা যায় এবং ইলেকট্রনমূলক এলাকা প্রত্যাহার করা হয় তখন রঙ অপসারিত করা যায়。
ট্র্যাগ-ড্রপ হলো HTML5-এর একটি অত্যন্ত সাধারণ ফিচার। এটি হলো যখন আপনি একটি অবজেক্টকে 'ট্র্যাগ' করে এবং তা আরও কোনও স্থানে ট্র্যাগ করে নিয়ে যান। আরও জানতে আপনাকে আমাদের ওয়েবসাইটের নিচের অংশটি পড়ুন এইচটিএমএল৫ ড্র্যাগ ও ড্রপএবং ব্যবহার করুন。
মন্তব্য:যদি ইলেকট্রনমূলক এলাকা ট্র্যাগকর্মী করতে হয়, তবে গ্লোবাল HTML টিউটোরিয়াল HTML5 draggable প্রকৃতি.
সুঝাওয়া:ডিফল্টে, লিঙ্ক এবং ছবিগুলি ট্র্যাগকর্মী হয়, draggable প্রকৃতির প্রয়োজন নেই。
ট্র্যাগ-ড্রপ অপারেশনের বিভিন্ন পর্যায়ে, অনেক ইভেন্ট ব্যবহৃত হয় এবং ঘটতে পারে:
ট্র্যাগকর্মী লক্ষ্য (সূত্র ইলেকট্রনমূলক এলাকা) অপরিবর্তিত হওয়ার সময় ঘটানো হয় এমন ইভেন্ট:
- ondragstart - যখন ব্যবহারকারী ট্র্যাগকর্মী ইলেকট্রনমূলক এলাকা ট্র্যাগ করা হয় তখন ঘটে
- ondrag - যখন ইলেকট্রনমূলক এলাকা ট্র্যাগ করা হয় তখন ঘটে
- ondragend - যখন ব্যবহারকারী ট্র্যাগকর্মী ইলেকট্রনমূলক এলাকা প্রত্যাহার করা হয় তখন ঘটে
প্রত্যাহার করার লক্ষ্যে এলাকা অপরিবর্তিত হওয়ার সময় ঘটানো হয় এমন ইভেন্ট:
- ondragenter - যখন ট্র্যাগকর্মী ইলেকট্রনমূলক এলাকা প্রত্যাহার করা হয় তখন ঘটে
- ondragover - যখন ট্র্যাগকর্মী ইলেকট্রনমূলক এলাকা প্রত্যাহার করা হয় তখন ঘটে
- ondragleave - যখন ট্র্যাগকর্মী ইলেকট্রনমূলক এলাকা প্রত্যাহার করা হয় তখন ঘটে
- ondrop - যখন ট্র্যাগকর্মী ইলেকট্রনমূলক এলাকা প্রত্যাহার করা হয় তখন ঘটে
Example
যখন ট্র্যাগকর্মী ইলেকট্রনমূলক এলাকা প্রত্যাহার করা হয় তখন জাভাস্ক্রিপ্ট চালু করা হয়:
<div ondragleave="myFunction(event)"></div>
পাতার নিচে আরও TIY ইনস্ট্যান্সস আছে。
ব্যবহারিক শব্দ
এইচটিএমএল-এর মধ্যে:
<element ondragleave="myScript">
জাভাস্ক্রিপ্টের মধ্যে:
object.ondragleave = function(){myScript};
জাভাস্ক্রিপ্টের মধ্যে, addEventListener() মথুর ব্যবহার করে:
object.addEventListener("dragleave", myScript);
মন্তব্য:ইন্টারনেট এক্সপ্লোরার 8 বা আরও পুরানীর সংস্করণগুলি এটা সমর্থন করে না addEventListener() মথুর.
Technical Details
Bubble: | Supported |
---|---|
Cancelable: | Not supported |
Event type: | ড্র্যাগইভেন্ট |
Supported HTML tags: | All HTML elements |
DOM Version: | Level 3 Events |
Browser Support
The numbers in the table indicate the first browser version that fully supports the event.
Event | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
ondragleave | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Example
For all possible drag and drop events demonstration:
<p draggable="true" id="dragtarget">Drag me!</p> <div class="droptarget">Drop here!</div> <script> /* ----------------- 在拖动目标上触发的事件 ----------------- */ document.addEventListener("dragstart", function(event) { // dataTransfer.setData()方法设置被拖拽数据的数据类型和值 event.dataTransfer.setData("Text", event.target.id); // 开始拖动 p 元素时输出一些文本 document.getElementById("demo").innerHTML = "Started to drag the p element."; // 更改可拖动元素的不透明度 event.target.style.opacity = "0.4"; }); // 拖动 p 元素时,更改输出文本的颜色 document.addEventListener("drag", function(event) { document.getElementById("demo").style.color = "red"; }); // 完成拖动 p 元素后输出一些文本并重置不透明度 document.addEventListener("dragend", function(event) { document.getElementById("demo").innerHTML = "Finished dragging the p element."; event.target.style.opacity = "1"; }); /* ----------------- ড্রপ টার্গেটের উপর ট্রিগার হওয়া ইভেন্ট ----------------- */ // ড্রগযোগ্য p এলিমেন্ট যখন droptarget এ এন্টার করে, DIV এর বর্তনীর শৈলী পরিবর্তন করুন document.addEventListener("dragenter", function(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = "3px dotted red"; } }); // ডিফল্টভাবে, অন্য এলিমেন্টে ডাটা/এলিমেন্ট প্লেস করা হতে পারে না। প্লেসিং অনুমতি দিতে, আমরা এলিমেন্টের ডিফল্ট হ্যান্ডলিং প্রতিরোধ করতে হবে document.addEventListener("dragover", function(event) { event.preventDefault(); }); // ড্রগযোগ্য p এলিমেন্ট যখন droptarget থেকে ছেড়ে যায়, DIV এর বর্তনীর শৈলী পুনরায় সংযোজন করুন document.addEventListener("dragleave", function(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = ""; } }); /* On drop - ব্রাউজারের ডাটার ডিফল্ট হ্যান্ডলিং প্রতিরোধ করুন (ডিফল্ট ড্রপ হলে লিঙ্ক হিসাবে খোলা) আউটপুট টেক্সট এবং DIV এর বর্তনীর রঙ পুনরায় সংযোজন করুন dataTransfer.getData() মথদল ব্যবহার করে ড্রগ করা ডাটা পাওয়া ড্রগ করা ডাটা ড্রগ করা এলিমেন্টের id ("drag1") ড্রগ হওয়া এলিমেন্টকে ড্রপ হওয়া এলিমেন্টে যুক্ত করুন */ document.addEventListener("drop", function(event) { event.preventDefault(); if ( event.target.className == "droptarget" ) { document.getElementById("demo").style.color = ""; event.target.style.border = ""; var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); } }); </script>