حدث ondragover

أحداث DOM DragEvent

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

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

بافتراض الافتراض، لا يمكن حذف البيانات/العناصر في العناصر الأخرى. لتمكين الإفلات، يجب منع معالجة العنصر الافتراضية. يتم تحقيق ذلك عن طريق استدعاء طريقة event.preventDefault() في أحداث ondragover.

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

التعليقات:لجعل العنصر قابل للسحب، استخدم الشرح الكامل لـ خاصية draggable في HTML5。

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

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

الأحداث التي تتم إطلاقها على الهدف القابل للسحب (العنصر المصدر):

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

الأحداث التي تتم إطلاقها على الهدف الموضع:

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

التعليقات:يتم إطلاق أحداث ondragover كل 350 ملي ثانية عند سحب العنصر.

مثال

يتم تنفيذ JavaScript عند وضع العنصر على هدف الرفع:

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

تجربة بنفسك

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

النحو

في HTML:

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

تجربة بنفسك

في JavaScript:

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

تجربة بنفسك

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

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

تجربة بنفسك

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

技术细节

冒泡： 支持
可取消： 支持
事件类型： DragEvent
支持的 HTML 标签： 所有 HTML 元素
DOM 版本： Level 3 Events

浏览器支持

表中的数字注明了完全支持该事件的首个浏览器版本。

事件 Chrome IE Firefox Safari Opera
ondragover 4.0 9.0 3.5 6.0 12.0

更多实例

对所有可能的拖放事件的演示：

<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
/* ----------------- 在拖动目标上触发的事件 ----------------- */
document.addEventListener("dragstart", function(event) {
  // dataTransfer.setData()方法设置被拖拽数据的数据类型和值
  event.dataTransfer.setData("Text", event.target.id);
  // 开始拖动 p 元素时输出一些文本
  document.getElementById("demo").innerHTML = "Started to drag the p element.";
  // 更改可拖动元素的不透明度
  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 = "Finished dragging the p element.";
  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