ondragenter ইভেন্ট

DOM ইভেন্ট DragEvent

সংজ্ঞা ও ব্যবহার

যখন ট্রেজবল এলিমেন্ট এবং টেক্সট সিলেকশন বৈধ প্লেসমেন্ট টার্গেটে এনে আসবে, ondragenter ইভেন্ট ঘটে

ondragenter এবং ondragleave ইভেন্টস সাহায্য করে, কোনও ট্রেজবল এলিমেন্টটি যখন প্লেসমেন্ট টার্গেটে এনে আসবে বা উঠবে তখন ব্যবহারকারীকে অবহিত করে। উদাহরণস্বরূপ, ট্রেজবল এলিমেন্টটি প্লেসমেন্ট টার্গেটে এনে আসবে তখন প্রক্ষিপ্ত রঙ সজ্জা করতে এবং এলিমেন্টটি টার্গেট থেকে উঠলে রঙ অপসারণ করতে হবে。

ট্রেজ ও ড্রপ হলো একটি অত্যন্ত সাধারণ HTML5 ফিচার। এটি হলো যখন আপনি একটি অবজেক্টকে "ধরে" নিয়ে একটি ভিন্ন স্থানে ট্রেজ করেন। আরও জানতে আপনাকে আমাদের ওয়েবসাইটের HTML5 ট্রেকএর ব্যবহার করুন

মন্তব্য:যদি এলিমেন্টটিকে ট্রেজবল করতে হয়, তবে গ্লোবাল HTML টিউটোরিয়াল HTML5 draggable অ্যাট্রিবিউট.

সুঝাওয়া:ডিফল্টে, লিঙ্ক এবং ছবিগুলি ট্রেজবল হয়, draggable অ্যাট্রিবিউট চাহিদা নেই

ট্রেজ ও ড্রপ অপারেশনের বিভিন্ন পর্যায়ে, বহু ইভেন্ট ব্যবহৃত হয় এবং ঘটতে পারে:

ট্রেজবল টার্গেট (সূত্র এলিমেন্ট) উপর ট্রিগার হওয়া ইভেন্টস:

  • ondragstart - যখন ব্যবহারকারী এলিমেন্টটি ট্রেজ করা শুরু করবে তখন ঘটে
  • ondrag - যখন এলিমেন্টটি ট্রেজ করা হবে তখন ঘটে
  • ondragend - যখন ব্যবহারকারী ট্রেজবল এলিমেন্টটি সম্পন্ন করবে তখন ঘটে

প্লেসমেন্ট টার্গেটের উপর ট্রিগার হওয়া ইভেন্টস:

  • ondragenter - যখন ট্রেজবল এলিমেন্টটি প্লেসমেন্ট টার্গেটে এনে আসবে তখন ঘটে
  • ondragover - যখন ট্রেজবল এলিমেন্টটি প্লেসমেন্ট টার্গেটে থাকবে তখন ঘটে
  • ondragleave - যখন ট্রেজবল এলিমেন্টটি প্লেসমেন্ট টার্গেট থেকে উঠবে তখন ঘটে
  • ondrop - যখন ট্রেজবল এলিমেন্টটি প্লেসমেন্ট টার্গেটে পড়বে তখন ঘটে

ইনস্ট্যান্স

যখন ট্রেজবল এলিমেন্টটি প্লেসমেন্ট টার্গেটে এনে আসবে তখন জেভাস্ক্রিপ্ট চালু করা হবে:

<div ondragenter="myFunction(event)"></div>

আপনার নিজের হাতে প্রয়াস করুন

পাতার নিচে আরও TIY ইনস্ট্যান্স আছে

সংজ্ঞা

এইচটিএমএল তে:

<element ondragenter="myScript">

আপনার নিজের হাতে প্রয়াস করুন

জেভাস্ক্রিপ্টে:

object.ondragenter = function(){myScript};

আপনার নিজের হাতে প্রয়াস করুন

জেভাস্ক্রিপ্টে, addEventListener() মথুরা ব্যবহার করে:

object.addEventListener("dragenter", myScript);

আপনার নিজের হাতে প্রয়াস করুন

মন্তব্য:ইন্টারনেট এক্সলোরার ৮ বা আরও পুরানো সংস্করণগুলি সমর্থন করে না addEventListener() method.

Technical Details

Bubble: Supported
Cancelable: Supported
Event type: DragEvent
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 this event.

Event Chrome IE Firefox Safari Opera
ondragenter 4.0 9.0 3.5 6.0 12.0

More examples

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 এলিমেন্ট ড্রপটার্গে প্রবেশ করার সময়, 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 এলিমেন্ট ড্রপটার্গ থেকে ছেড়ে যাওয়ার সময়, 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>

আপনার নিজের হাতে প্রয়াস করুন

সংশ্লিষ্ট পাতা

HTML টিউটোরিয়াল: HTML5 ড্রগ অ্যান্ড ড্রপ

HTML রেফারেন্স ম্যানুয়েল: HTML draggable এট্রিবিউট

DOM ইভেন্ট DragEvent