حدث ondragleave
توصية للمقررات
تعريف و استخدام
يحدث حدث ondragleave عند مغادرة العنصر القابل للسحب أو اختيار النص خارج الهدف الموضع.
يمكن لمساعدة المستخدم على فهم أن العنصر القابل للسحب سيصل إلى الهدف الموضع أو سيبتعد عنه. على سبيل المثال، يمكن تعيين لون الخلفية عند دخول العنصر إلى الهدف الموضع، وإزالة اللون عند مغادرة العنصر للهدف الموضع. تحريك HTML5HTML. لتعلم المزيد، يُرجى قراءة ما نشرناه عن
ملاحظة:لجعل العنصر قابلًا للسحب، استخدم دليل خاصية draggable في HTML5。
نصيحة:بافتراض الافتراض، يمكن سحب الروابط والصور، ولا تحتاج إلى خاصية draggable.
في مراحل مختلفة من عملية السحب والافراج، يتم استخدام العديد من الأحداث، وقد تحدث:
الأحداث التي تُشغّل على الهدف القابل للسحب (العنصر المصدر):
- ondragstart - يحدث عند بدء المستخدم في سحب العنصر
- ondrag - يحدث عند سحب العنصر
- ondragend - يحدث عند إكمال المستخدم لسحب العنصر
الأحداث التي تُشغّل على الهدف الموضع:
- ondragenter - يحدث عند دخول العنصر القابل للسحب إلى الهدف الموضع
- ondragover - يحدث عند وجود العنصر القابل للسحب على الهدف الموضع
- ondragleave - يحدث عند انفصال العنصر القابل للسحب عن الهدف الموضع
- ondrop - يحدث عند وضع العنصر القابل للسحب على الهدف الموضع
实例
يتم تنفيذ JavaScript عند انتقال العنصر القابل للسحب خارج الهدف الموضع
<div ondragleave="myFunction(event)"></div>
في أسفل الصفحة هناك أمثلة TIY أكثر.
النحو
في HTML:
<element ondragleave="myScript">
في JavaScript:
object.ondragleave = function(){myScript};
في JavaScript، استخدم طريقة addEventListener()
object.addEventListener("dragleave", myScript);
ملاحظة:Internet Explorer 8 أو الإصدارات الأقدم لا تدعمها الطريقة addEventListener()。
技术细节
| 变火注： | 支持 |
|---|---|
| 可取消： | 不支持 |
| 事件类型： | DragEvent |
| 支持的 HTML 标签： | 所有 HTML 元素 |
| DOM 版本： | 等级 3 事件 |
浏览器支持
表中的数字明明支持该事件的第一个浏览器版本。
| 事件 | 浏览器 | 服务器 | 看猜 | 浏览器 | 正在 |
|---|---|---|---|---|---|
| ondragleave | 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) {
// dataTransfer.setData() 方法设置被拖动数据的数据类型和值
event.dataTransfer.setData("Text", event.target.id);
// 开始拖动 p 元素时输出一些文本
document.getElementById("demo").innerHTML = ";开始拖动 p 元素时输出一些文本.";
// 修改可拖动元素的不通明度
event.target.style.opacity = ";0.4;";
});
// 拖动 p 元素时，修改输出文本的颜色
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = ";纳色;";
});
// 完成拖动 p 元素后输出一些文本并重置不通明度
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = ";正备拖动的 p 元素.";
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>
