حدث ondragend
التعريف والاستخدام
يحدث حدث ondragend عند انتهاء المستخدم من سحب العنصر أو اختيار النص.
السحب والإفلات هو ميزة شائعة جدًا في HTML5. وهو عندما تقوم بسحب عنصر وتديره إلى مواقع مختلفة. للحصول على معرفة أكثر، اقرأ سحب وإفلات HTML5دليل HTML التعليمي.
ملاحظة:لجعل العنصر قابلاً للسحب، استخدم خاصية draggable في HTML5.
نصيحة:بافتراض الافتراض، يمكن سحب الروابط والصور دون الحاجة إلى خاصية draggable.
في مراحل مختلفة من عملية السحب والإفلات، يتم استخدام العديد من الأحداث، وقد تحدث:
الأحداث التي تُطلق على الهدف القابل للسحب (العنصر المصدر):
- ondragstart - يحدث عند بدء المستخدم في سحب العنصر
- ondrag - يحدث عند سحب العنصر
- ondragend - يحدث عند انتهاء المستخدم من سحب العنصر
الأحداث التي تُطلق على الهدف الموضع:
- ondragenter - يحدث عند دخول العنصر المحمل إلى الهدف
- ondragover - يحدث عند وجود العنصر المحمل على الهدف
- ondragleave - يحدث عند إزالة العنصر المحمل من الهدف
- ondrop - يحدث عند وضع العنصر المحمل على الهدف
مثال
عندما ينتهي المستخدم من سحب عنصر <p>، يتم تنفيذ JavaScript:
<p draggable="true" ondragend="myFunction(event)">أتركني!</p>
في أسفل الصفحة هناك أمثلة TIY أكثر.
النحو
في HTML:
<عنصر ondragend="myScript">
في JavaScript:
عنصر.ondragend = function(){myScript};
في JavaScript، يتم استخدام طريقة addEventListener() كما يلي:
عنصر.addEventListener("dragend", myScript);
ملاحظة:يستخدم متصفح إنترنت إكسبلورر 8 أو الأحدث منه مетод addEventListener().
Technical details
| Bubble: | Supported |
|---|---|
| Cancelable: | Not supported |
| Event type: | DragEvent |
| Supported HTML tags: | All HTML elements |
| DOM version: | Level 3 Events |
Browser support
The numbers in the table indicate the first browser version that fully supports the event.
| Event | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragend | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
More examples
All possible drag and drop events demonstration:
<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</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() للحصول على البيانات التي يتم سحبها
البيانات التي يتم سحبها هي 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>
