حدث ondrop
التعريف والاستخدام
يحدث إحداث ondrop عندما يتم وضع العنصر القابل للسحب أو النص المختار على هدف الضعف.
السحب والوضع هي وظيفة شائعة جدًا في HTML5. وهي عندما تأخذ عنصرًا وتقوم بسحبه إلى موضع آخر. للحصول على معرفة إضافية، يُرجى قراءة سحب HTML5دليل HTML.
التعليقات:لجعل العنصر قابلًا للسحب، استخدم خاصية draggable في HTML5.
نصيحة:بافتراض الافتراض، يمكن سحب الروابط والصور دون الحاجة إلى خاصية draggable.
في مراحل مختلفة من عملية السحب والوضع، يتم استخدام العديد من الإحداث، وقد يحدث:
الإحداث التي تُتعرض لها على الهدف القابل للسحب (العنصر المصدر):
- ondragstart - يحدث عند بدء المستخدم في سحب العنصر.
- ondrag - يحدث عند سحب العنصر.
- ondragend - يحدث عند إكمال المستخدم لسحب العنصر.
الإحداث التي تُتعرض لها على الهدف الضعف:
- ondragenter - يحدث عند دخول العنصر القابل للسحب إلى الهدف.
- ondragover - يحدث عند وجود العنصر القابل للسحب على الهدف.
- ondragleave - يحدث عند مغادرة العنصر الهدف.
- ondrop - يحدث عند وضع العنصر القابل للسحب على هدف الضعف.
مثال
عند وضع عنصر قابلة للسحب داخل عنصر <div>، يتم تنفيذ JavaScript:
<div ondrop="myFunction(event)"></div>
هناك أمثلة TIY أكثر في أسفل الصفحة.
النحو
في HTML:
<عنصر ondrop="myScript">
في JavaScript:
عنصر.ondrop = function(){myScript};
في JavaScript، يتم استخدام طريقة addEventListener():
عنصر.addEventListener("drop", myScript);
التعليقات:Internet Explorer 8 أو الإصدارات الأقدم لا تدعم method 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) {
// يتم تعيين نوع البيانات وقيمته للبيانات المُسحوبة باستخدام method setData()
event.dataTransfer.setData("Text", event.target.id);
// عند بدء سحب عنصر p يتم إدخال بعض النصوص
document.getElementById("demo").innerHTML = ";";
// يتم تغيير شفافية العنصر القابل للسحب
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>
