ondrag ایوینٹ

DOM ایوینٹ DragEvent

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

رویداد ondrag وقتی علامت یا انتخاب متن بکشیده می‌شود، رخ می‌دهد.

کشیدن و رها کردن یکی از معمول‌ترین ویژگی‌های HTML5 است. یعنی وقتی شما یک شیء را "بگیرید" و آن را به مکان دیگری بکشید. برای یادگیری بیشتر، بخش‌های مربوطه ما را بخوانید HTML5 کا ڈرگ اینڈ ڈرپتوضیحات HTML استفاده کنید.

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

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

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

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

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

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

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

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

مثال

وقتی که علامت <p> را بکشید، جاوااسکریپت اجرا می‌شود:

<p draggable="true" ondrag="myFunction(event)">بکش من!</p>

آپ خود جیب کریں

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

نحوه نوشتن

در HTML:

<element ondrag="myScript">

آپ خود جیب کریں

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

object.ondrag = function(){myScript};

آپ خود جیب کریں

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

object.addEventListener("drag", myScript);

آپ خود جیب کریں

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

جزئیات فنی

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

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

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

رویداد کروم آئی‌ای افری سافاری آپرا
ondrag 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() dataTransfer داده‌های تار شده را نوع داده و مقدار را تنظیم می‌کند
  event.dataTransfer.setData("Text", event.target.id);
  // وقتی شروع به تار کردن کلمه پ عناصر کردم، چندین متن بیرون می‌دهم
  document.getElementById("demo").innerHTML = "شروع کردم به تار کردن کلمه پ عناصر.";
  // شفافیت عنصر قابل تار کردن را تغییر می‌دهم
  event.target.style.opacity = "0.4";
});
// وقتی کلمه پ عناصر در حال تار کردن است، رنگ متن خروجی را تغییر می‌دهم
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// بعد از تار کردن کلمه پ عناصر، چندین متن بیرون می‌دهم و شفافیت را تنظیم می‌کنم
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "مکمل کردم کلمه پ عناصر تار را کشیدم.";
  event.target.style.opacity = "1";
});
/* ----------------- رکھنے والی نشان میں کئے گئے واقعات ----------------- */
// کچھ دوگم کئے گئے پی عناصر کو رکھنے والی عنصر میں داخل ہونے کے بعد، دی وی کی بوردر کی تکنیک کو بدل دیں
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// عام طور پر، دیگر عناصر میں داده/عنصر کو رکھنا نہیں کیا جاسکتا۔ رکھنا بھی سکتا ہے تو، عناصر کی عام طور پر تکنیک کو روکنا ضروری ہوتا ہے
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// کچھ دوگم کئے گئے پی عناصر کو رکھنے والی عنصر سے باہر نکلنے کے بعد، دی وی کی بوردر کی تکنیک کو دوبارہ سیٹ کریں
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* On drop - بروسر کے داده کا کچھ تھانپنا روکنا (اس کی جگہ رابطہ کا کچھ تھانپنا کیا جائے گا)
خروجی متن کی رنگ اور دی وی کی بوردر کی رنگ کو دوبارہ سیٹ کریں
دوگم کئے گئے اعداد کو 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>

آپ خود جیب کریں

معلوماتی صفحات

ہیٹل تعلیم:HTML5 کا ڈرگ اینڈ ڈرپ

HTML 参考 دستور زبان:HTML draggable اپنے حوالے سے

DOM ایوینٹ DragEvent