سبد (0)

رویداد ondragenter

مثال (رویداد ondragenter)

اجرا کردن یک تابع جاوااسکریپت هنگامی که یک عنصر با قابلیت درگ شدن وارد منطقه ی رها شدن(دراپ) شود:

<div ondragenter="myFunction(event)"></div>

خودتان امتحان کنید »

در انتهای این صفحه، مثال های بیشتری آورده شده است.


تعریف و کاربرد

رویداد 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:

<element ondragenter="myScript">امتحان کنید

در جاوااسکریپت:

object.ondragenter=function(){myScript};امتحان کنید

استفاده از متد addEventListener() در جاوااسکریپت:

object.addEventListener("dragenter", myScript);امتحان کنید

نکته: متد addEventListener() در Internet Explorer 8  و ورژن های قدیمی تر آن پشتیبانی نمی شود.


جزئیات تکنیکی

Bubbles: بله
Cancelable: بله
Event type: DragEvent
Supported HTML tags: All HTML elements
DOM Version: Level 3 Events

مثال

مثال - خودتان امتحان کنید

مثال (رویداد ondragenter)

یک نسخه نمایشی از تمام رویداد های درگ و دراپ:

<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 Tutorial: HTML5 Drag and Drop

HTML Reference: HTML draggable Attribute


مرجع کلیه رویدادهای JavaScript Reference مرجع کلیه رویدادهای JavaScript


تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه