ondragleave واقع

DOM واقع DragEvent

تعریف و استعمال

جب کوئی درآمدی عنصر یا متن انتخاب کو مقصد کی پوسٹ سے باہر لے جانا شروع ہوتا ہے تو، ondragleave واقعات ہوتے ہیں。

ondragenter اور ondragleave واقعات کو کاربر کو کوئی درآمدی عنصر کو مقصد کی پوسٹ میں داخل یا باہر جانے کی معلومات دینا ہوتا ہے، مثلاً، کوئی درآمدی عنصر کو مقصد کی پوسٹ میں داخل کرنے کے وقت پس منظر رنگ میں تبدیل کرنا اور عناصر کو باہر جانے کے وقت رنگ کو باضابطہ بنانا،

درآمدی چلانے کا عمل HTML5 میں بہت عام عمل ہے، جو آپ کو کسی عنصر کو تناوب کو مقصد کی پوسٹ پر لے جانا اور مختلف مقامات پر لگایا جاتا ہے، اگر مزید معلومات حاصل کرنا چاہیئے تو، ہماری HTML5 کا درآمد و خروجکا تعلیم میں مزید معلومات پائی جاسکتی ہیں。

نوٹ:اگر آپ کو ایک عنصر کو درآمدی بنانا چاہیے تو، عالمی HTML کی تعلیم میں استعمال کیاجاتا ہے، HTML5 draggable خاصیت.

نکات:دفعہ کی صورت میں، لنکس اور تصاویر درآمدی ہیں، draggable خاصیت کو استعمال نہیں کیا جاتا

درآمدی چلانے کے مختلف مراحل میں، متعدد واقعات استعمال کئے جاتے ہیں اور ممکن ہوتے ہیں:

درآمدی مقصد (ورژن عنصر) پر رکھنے کا واقع:

  • ondragstart - جب کاربر کوئی درآمدی عنصر کو تناوب کو مقصد کی پوسٹ پر شروع کرنا شروع کرتا ہے تو
  • ondrag - جب کوئی عنصر کو تناوب کو مقصد کی پوسٹ پر لگایا جاتا ہے تو
  • ondragend - جب کاربر کوئی درآمدی عنصر کو تناوب کو مقصد کی پوسٹ پر لگایا جاتا ہے تو

مقصد کی پوسٹ پر رکھنے کا واقع:

  • ondragenter - جب کوئی درآمدی عنصر کو مقصد کی پوسٹ میں داخل کرنا شروع ہوتا ہے تو
  • ondragover - جب کوئی درآمدی عنصر کو مقصد کی پوسٹ پر رکھا جاتا ہے تو
  • ondragleave - جب کوئی درآمدی عنصر کو مقصد کی پوسٹ سے باہر لے جانا شروع ہوتا ہے تو
  • ondrop - جب کوئی درآمدی عنصر کو مقصد کی پوسٹ پر لگایا جاتا ہے تو

مثال

جب کوئی درآمدی عنصر کی تناوب کو مقصد کی پوسٹ پر لے جانا شروع ہوتا ہے تو جاوا اسکریپت چلایا جاتا ہے:

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

خود را امتحان کنید

صفحے کے نیچے مزید TIY مثال ہیں。

نویگیشن

جس میں HTML میں:

<عنصر ondragleave="myScript">

خود را امتحان کنید

جس میں جاوا اسکریپت میں:

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

خود را امتحان کنید

جس میں جاوا اسکریپت میں،addEventListener() کا موسیقی استعمال کیا جاتا ہے:

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

خود را امتحان کنید

نوٹ:Internet Explorer 8 یا اسکاچ سے پچھلے ورژن اس کا استعمال نہیں کیا جاسکتا addEventListener() کا موسیقی.

جزئیات فنی

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

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

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

رویداد کروم IE افراط سافاری اپرا
ondragleave 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 = "";
  }
});
/* در هنگام رها کردن - جلوگیری از پردازش پیش‌فرض مرورگر برای داده‌ها (در صورت قرار دادن پیش‌فرض به عنوان لینک باز می‌شود) */
رنگ متن خروجی و رنگ لبه 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