حدث ondragenter

أحداث DOM DragEvent

التعريف والاستخدام

يحدث حدث ondragenter عندما يدخل العنصر القابل للسحب أو اختيار النص إلى الهدف المخصص.

يمكن استخدام أحداث ondragenter و ondragleave لمساعدة المستخدم على فهم أن العنصر القابل للسحب سيُدخل أو يغادر الهدف المخصص. على سبيل المثال، يمكن تعيين لون الخلفية عند دخول العنصر القابل للسحب إلى الهدف المخصص، والقضاء على اللون عند مغادرة العنصر للهدف.

تتميز HTML5 بميزة التسحب والإفلات الشائعة. وهي عندما تقوم بسحب عنصر وتنسيقه إلى موقع آخر. للحصول على معرفة إضافية، يُرجى قراءة سحب وإفلات HTML5دليل HTML.

التعليقات:لجعل العنصر قابلًا للسحب، استخدم خاصية draggable في HTML5.

نصيحة:بافتراض الافتراض، يمكن سحب الروابط والصور دون الحاجة إلى خاصية draggable.

في مراحل مختلفة من عملية السحب والافراج، يتم استخدام العديد من الأحداث، وقد تحدث:

الأحداث التي تُشغّل على الهدف القابل للسحب (العنصر المصدر):

  • ondragstart - يحدث عند بدء سحب العنصر من قبل المستخدم
  • ondrag - يحدث عند سحب العنصر
  • ondragend - يحدث عند اكتمال سحب العنصر من قبل المستخدم

الأحداث التي تُشغّل على الهدف المخصص للسحب:

  • ondragenter - يحدث عند دخول العنصر القابل للسحب إلى الهدف المخصص
  • ondragover - يحدث عند وجود العنصر القابل للسحب على الهدف المخصص
  • ondragleave - يحدث عند مغادرة العنصر القابل للسحب من الهدف المخصص
  • ondrop - يحدث عند وضع العنصر القابل للسحب على الهدف المخصص

مثال

يتم تنفيذ JavaScript عند دخول العنصر القابل للسحب إلى الهدف المخصص:

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

جرب بنفسك

هناك أمثلة TIY أكثر في نهاية الصفحة.

النحو

في HTML:

<العنصر ondragenter="myScript">

جرب بنفسك

في JavaScript:

الجسم.ondragenter = function(){myScript};

جرب بنفسك

في JavaScript، يتم استخدام طريقة addEventListener() كما يلي:

الجسم.addEventListener("dragenter", myScript);

جرب بنفسك

التعليقات:Internet Explorer 8 أو الإصدارات الأقدم لا تدعمها method addEventListener().

تفاصيل التقنية

التدفق الفقاعي: يدعم
يمكن إلغاء الطلب: يدعم
نوع الحدث: DragEvent
الوسوم HTML المدعومة: جميع عناصر HTML
إصدار DOM: أحداث المستوى 3

دعم المتصفحات

الرقم في الجدول يشير إلى إصدار أولي من المتصفح الذي يدعم هذا الحدث بشكل كامل.

الحدث Chrome IE Firefox Safari Opera
ondragenter 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) {
  // يتم تعيين نوع البيانات والمقدار للبيانات المُسحوبة باستخدام method setData(dataTransfer.setData())
  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 = "+[النص المناسب]+";
  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() للحصول على البيانات التي يتم سحبها
البيانات التي يتم سحبها هي 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