حدث الـondrag

أحداث الـDOM DragEvent

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

يحدث حدث ondrag عند سحب عنصر أو اختيار نص.

السحب والإفلات هي وظيفة شائعة جدًا في HTML5. وهي عندما تقوم بـ "التقاطع" لشئ وتسحبه إلى موضع آخر. للحصول على معرفة أكثر، يُرجى قراءة سحب الـHTML5HTML لتعلم المزيد.

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

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

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

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

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

الأحداث التي تُشعلها على الهدف الموضع:

  • ondragenter - تحدث عند دخول العنصر المُسحب إلى الهدف الموضع.
  • ondragover - تحدث عند وجود العنصر المُسحب على الهدف الموضع.
  • ondragleave - تحدث عند انتزاع العنصر من الهدف الموضع.
  • ondrop - تحدث عند وضع العنصر المُسحب على الهدف المُوضع.

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

مثال

عند سحب عنصر <p>، يتم تنفيذ JavaScript:

<p draggable="true" ondrag="myFunction(event)">أدخلني!</p>

تجربة بنفسك

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

النحو

في HTML:

<element ondrag="myScript">

تجربة بنفسك

في JavaScript:

object.ondrag = function(){myScript};

تجربة بنفسك

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

object.addEventListener("drag", myScript);

تجربة بنفسك

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

技术细节

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

浏览器支持

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

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

更多实例

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

<p draggable="true" id="dragtarget">;document.getElementById("demo").innerHTML = ";</p>
<div class="droptarget">;document.getElementById("demo").innerHTML = ";</div>
<script>
/* ----------------- ;document.getElementById("demo").innerHTML = ";
document.addEventListener("dragstart", function(event) {
  // ;document.getElementById("demo").innerHTML = ";
  event.dataTransfer.setData("Text", event.target.id);
  // ;document.getElementById("demo").innerHTML = ";
  document.getElementById("demo").innerHTML = ";document.getElementById("demo").innerHTML = ";
  // ;document.getElementById("demo").innerHTML = ";
  event.target.style.opacity = ";event.target.style.opacity = ";
});
// ;document.getElementById("demo").innerHTML = ";
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = ";document.getElementById("demo").style.color = ";
});
// ;document.getElementById("demo").innerHTML = ";
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = ";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() للحصول على البيانات المُسحوبة
البيانات التي يتم سحبها هي معرف العنصر المُسحوب ("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:خصائص السحب الـHTML draggable

أحداث الـDOM DragEvent