حدث ondrop
مثال
نفِّذ جافا سكريبت عندما يتم إسقاط عنصر قابل للسحب في عنصر <div>:
<div ondrop="myFunction(event)"></div>
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
يحدث حدث ondrop عندما يتم إسقاط عنصر قابل للسحب أو تحديد نص على هدف إسقاط صالح.
يعد السحب والإفلات ميزة شائعة جدًا في HTML5. إنه عندما "تمسك" بشيء ما وتسحبه إلى مكان مختلف. لمزيد من المعلومات ، راجع دروس HTML الخاصة بنا حول السحب والإفلات بتنسيق HTML5 .
ملاحظة: لجعل عنصر ما قابلاً للسحب ، استخدم سمة HTML5 العامة القابلة للسحب .
تلميح: الروابط والصور قابلة للسحب بشكل افتراضي ، ولا تحتاج إلى خاصية السحب.
هناك العديد من الأحداث التي يتم استخدامها ويمكن أن تحدث في المراحل المختلفة لعملية السحب والإفلات:
- يتم تشغيل الأحداث على الهدف القابل للسحب (عنصر المصدر) :
- ondragstart - يحدث عندما يبدأ المستخدم في سحب عنصر
- ondrag - يحدث عند سحب عنصر
- ondragend - يحدث عندما ينتهي المستخدم من سحب العنصر
- تم إطلاق الأحداث على هدف الإسقاط:
- ondragenter - يحدث عندما يدخل العنصر المسحوب في هدف الإسقاط
- ondragover - يحدث عندما يكون العنصر المسحوب فوق هدف الإسقاط
- ondragleave - يحدث عندما يترك العنصر المسحوب هدف الإسقاط
- ondrop - يحدث عندما يتم إسقاط العنصر المسحوب على هدف الإسقاط
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الحدث بشكل كامل.
Event | |||||
---|---|---|---|---|---|
ondrop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
بناء الجملة
في HTML:
<element ondrop="myScript">
في JavaScript:
object.ondrop = function(){myScript};
في JavaScript ، باستخدام طريقة addEventListener ():
object.addEventListener("drop", myScript);
ملاحظة: طريقة addEventListener () غير مدعومة في Internet Explorer 8 والإصدارات السابقة.
تفاصيل تقنية
فقاعات: | نعم |
---|---|
قابل للإلغاء: | نعم |
نوع الحدث: | حدث السحب |
علامات HTML المدعومة: | جميع عناصر HTML |
إصدار DOM: | أحداث المستوى 3 |
مزيد من الأمثلة
مثال
عرض توضيحي لجميع أحداث السحب والإفلات الممكنة:
<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
// Events fired on the drag target
document.addEventListener("dragstart", function(event) {
// The dataTransfer.setData() method sets the data type and the value of the dragged data
event.dataTransfer.setData("Text", event.target.id);
// Output some text when starting to drag the p element
document.getElementById("demo").innerHTML = "Started to drag the p element.";
// Change the opacity of the draggable element
event.target.style.opacity = "0.4";
});
// While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Output some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element.";
event.target.style.opacity = "1";
});
// Events fired on the drop target
// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
Reset the color of the output text and DIV's border color
Get the dragged data with the dataTransfer.getData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into the drop element
*/
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 قابلة للسحب