حادثة ondragover

حادثة DOM DragEvent

تعریف و استفاده

وقتی که عنصر قابل کشیدن یا انتخاب متن به عنوان هدف قرار می‌گیرد، رویداد ondragover رخ می‌دهد.

به طور پیش‌فرض، نمی‌توان داده‌ها/عناصر را در عناصر دیگر حذف کرد. برای اجازه دادن به قرار دادن، باید عملکرد پیش‌فرض عنصر را جلوگیری کرد. این کار از طریق فراخوانی روش event.preventDefault() در رویداد ondragover انجام می‌شود.

کشیدن و رها کردن یکی از ویژگی‌های بسیار رایج HTML5 است. این عمل زمانی رخ می‌دهد که یک شیء را "گرفتید" و به یک مکان دیگر کشید. برای یادگیری بیشتر، لطفاً مطالب ما در مورد تسليم HTML5آموزش HTML خود استفاده کنید.

توضیحات:برای اینکه عنصر قابل کشیدن باشد، از全局 ویژگی draggable HTML5。

توضیحات:به طور پیش‌فرض، لینک‌ها و تصاویر قابل کشیدن هستند و نیازی به ویژگی draggable نیست.

در مراحل مختلف عمل کشیدن و رها کردن، تعداد زیادی رویداد استفاده می‌شود و ممکن است رخ دهند:

رویدادهایی که در عنصر قابل کشیدن (عنصر منبع) قرار می‌گیرند:

  • ondragstart - وقتی که کاربر عمل کشیدن عنصر را شروع می‌کند، رخ می‌دهد
  • ondrag - وقتی که عنصر در حال کشیدن است، رخ می‌دهد
  • ondragend - وقتی که کاربر عمل کشیدن عنصر را به پایان می‌رساند، رخ می‌دهد

رویدادهایی که در هدف قرار می‌گیرند:

  • ondragenter - وقتی که عنصر به داخل هدف وارد می‌شود، رخ می‌دهد
  • ondragover - وقتی که عنصر در هدف قرار دارد، رخ می‌دهد
  • ondragleave - وقتی که عنصر از هدف خارج می‌شود، رخ می‌دهد
  • ondrop - وقتی که عنصر به عنوان هدف قرار می‌گیرد، رخ می‌دهد

توضیحات:وقتی که عنصر در حال کشیدن است، رویداد ondragover هر 350 میلی‌ثانیه یک بار فعال می‌شود.

مثال

اجرای جاوااسکریپت وقتی که یک عنصر به عنوان هدف قرار می‌گیرد:

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

آزمایش کنید

در پایین صفحه، مثال‌های بیشتری از TIY وجود دارد.

نحوه‌ی نوشتن

در HTML:

<element ondragover="myScript">

آزمایش کنید

در جاوااسکریپت:

object.ondragover = function(){myScript};

آزمایش کنید

در جاوااسکریپت، از روش addEventListener() استفاده می‌شود:

object.addEventListener("dragover", myScript);

آزمایش کنید

توضیحات:نسخه‌ی Internet Explorer 8 یا قدیمی‌تر پشتیبانی نمی‌کند مетод addEventListener()。

جزئیات فنی

حباب: پشتیبانی
قابل لغو: پشتیبانی
نوع رویداد: DragEvent
برچسب‌های HTML پشتیبانی شده: تمام عناصر HTML
نسخه DOM: رویدادهای سطح 3

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان از این رویداد هستند.

رویداد کروم IE افراط سفاری آپرا
ondragover 4.0 9.0 3.5 6.0 12.0

مثال‌های بیشتر

مثال‌های بیشتر برای همه رویدادهای ممکن کشیدن و رها کردن:

<p draggable="true" id="dragtarget">کشیدن من!</p>
<div class="droptarget">اینجا رها کن!</div>
<script>
/* ----------------- رویدادهایی که در هدف کشیدن فعال می‌شوند ----------------- */
document.addEventListener("dragstart", function(event) {
  // روش setData() داده‌های نوع و مقدار داده‌ای که در حال کشیدن است را تنظیم می‌کند
  event.dataTransfer.setData("Text", event.target.id);
  // هنگام شروع کشیدن عنصر p، یک سری متن را چاپ می‌کند
  document.getElementById("demo").innerHTML = ";
  // شفافیت عنصر قابل کشیدن را تغییر می‌دهد
  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 = ";
  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 = "";
  }
});
/* در زمان رها کردن - جلوگیری از پردازش پیش‌فرض مرورگر برای داده‌ها (در حالت پیش‌فرض به عنوان لینک باز می‌شود) */
رنگ متن خروجی و رنگ لبه DIV را بازنشانی کنید
از روش dataTransfer.getData() برای دریافت داده‌های کشیده شده استفاده کنید
داده‌های قابل کشیدن شناسه عنصر کشیده شده است ("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: ویژگی draggable HTML

حادثة DOM DragEvent