ondrop واقعی

DOM واقعی DragEvent

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

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

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

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

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

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

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

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

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

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

مثال:

وقتی عناصر قابل جابجایی در عناصر <div> قرار می‌گیرند، جاوااسکریپت اجرا می‌شود:

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

خود کا تجربہ کریں

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

رابط:

در HTML:

<عنصر ondrop="myScript">

خود کا تجربہ کریں

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

عنصر.ondrop = function(){myScript};

خود کا تجربہ کریں

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

عنصر.addEventListener("drop", myScript);

خود کا تجربہ کریں

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

جزئیات فنی

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

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

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

رویداد کروم IE افراط سافاری آپرا
ondrop 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);
  // پس از شروع کشیدن عنصر p، یک متن را چاپ کنید
  document.getElementById("demo").innerHTML = "شروع به کشیدن عنصر p شد.";
  // شفافیت عنصر قابل کشیدن را تغییر دهید
  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 = "پایان دادن به کشیدن عنصر p.";
  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>

خود کا تجربہ کریں

متعلقہ صفحات

HTML درس: HTML5 کچلنے

HTML مرجع دستورات: ویژگی draggable HTML

DOM واقعی DragEvent