رویداد ondragenter
مثال (رویداد ondragenter)
اجرا کردن یک تابع جاوااسکریپت هنگامی که یک عنصر با قابلیت درگ شدن وارد منطقه ی رها شدن(دراپ) شود:
خودتان امتحان کنید »
در انتهای این صفحه، مثال های بیشتری آورده شده است.
تعریف و کاربرد
رویداد ondragenter هنگامی روی می دهد که عنصر درگ شده(کشیده شده) وارد منطقه رها شدن(drop) شود.
رویداد ondragenter و ondragleave می توانند به کاربر کمک کنند تا بفهمد که چگونه یک عنصر قابل درگ، در آستانه ی ورود و یا ترک منطقه ی رها شدن(دراپ) قرار می گیرد. بعنوان مثال می توان یک عنصر با یک رنگ پس رمینه را در نظر گرفت تا هنگامی که کاربر در آستانه ی ورود به آن قرا می گیرد رنگ آن تغییر کند.
درگ(کشیده شدن) و دراپ(رها شدن) خصوصیت هایی بسیار متداول در HTML5 هستند.درگ و دراپ زمانی روی می دهد که یک شیءرا کشیده و در مکانی دیگر رها کنید.
نکته: برای اینکه به یک عنصر قابلیت درگ شدن(کشیده شدن) بدهید می توانید از خصوصیت draggable در HTML5 استفاده کنید.
نکته: لینک ها و عکس ها به طور پیش فرض قابلیت درگ شدن دارند و نیازی نیست که خصوصیت draggable برای آنها تعریف شود.
رویداد های زیادی وجود دارند که در مراحل مختلف درگ(کشیده شدن) و دراپ(رها شدن) استفاده می شوند:
رویداد هایی که در مرحله ی درگ به وجود می آیند:
- ondragstart: زمانی روی می دهد که کاربر شروع به درگ کردن(کشیدن) یک عنصر می کند.
- ondrag: زمانی روی می دهد که یک عنصر در حال درگ شدن(کشیده شدن) است.
- ondragend: زمانی روی می دهد که کاربر درگ کردن(کشیدن) را پایان دهد.
رویداد هایی که در مرحله دراپ(رها شدن) به وجود می آیند:
- ondragenter: زمانی روی می دهد که عنصر درگ شده(کشیده شده)، وارد منطقه رها شدن(دراپ) می شود.
- ondragover: زمانی روی می دهد که عنصر درگ شده(کشیده شده) بر روی منطقه رها شدن(دراپ) قرار بگیرد.
- ondragleave: زمانی روی می دهد که عنصر درگ شده(کشیده شده) منطقه رها شدن(دراپ) را ترک می کند.
- ondrop: زمانی روی می دهد که عنصر درگ شده(کشیده شده) بر روی منطقه رها شدن(دراپ)، رها شود.
پشتیبانی مرورگرها
اعداد داخل جدول نشان دهنده ی اولین ورژن مرورگری است که به طور کامل از این رویداد پشتیبانی می کند:
| Event | |||||
|---|---|---|---|---|---|
| ondragenter | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
نحوه استفاده
در HTML:
در جاوااسکریپت:
استفاده از متد addEventListener() در جاوااسکریپت:
نکته: متد addEventListener() در Internet Explorer 8 و ورژن های قدیمی تر آن پشتیبانی نمی شود.
جزئیات تکنیکی
| Bubbles: | بله |
|---|---|
| Cancelable: | بله |
| Event type: | DragEvent |
| Supported HTML tags: | All HTML elements |
| DOM Version: | Level 3 Events |
مثال - خودتان امتحان کنید
مثال (رویداد ondragenter)
یک نسخه نمایشی از تمام رویداد های درگ و دراپ:
<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 Tutorial: HTML5 Drag and Drop
HTML Reference: HTML draggable Attribute
مرجع کلیه رویدادهای JavaScript
- نوشته شده توسط احسان عباسی
- بازدید: 4868
