آموزش طراحی سایت (HTML CSS Javascript) | آتریا

رویداد ondragstart

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

اجرا کردن یک تابع جاوااسکریپت، هنگامی که کاربر درگ کردن یک عنصر را شروع می کند:

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

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

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

رویداد ondragstart زمانی روی می دهد که کاربر شروع به درگ کردن یک عنصر یا یک متن می کند.

درگ(کشیده شدن) و دراپ(رها شدن) خصوصیت هایی بسیار متداول در HTML5 هستند.درگ و دراپ زمانی روی می دهد که یک شیءرا کشیده و در مکانی دیگر رها کنید.

نکته: برای اینکه به یک عنصر قابلیت درگ شدن(کشیده شدن) بدهید می توانید از خصوصیت draggable در HTML5 استفاده کنید.

نکته: لینک ها و عکس ها به طور پیش فرض قابلیت درگ شدن دارند و نیازی نیست که خصوصیت draggable برای آنها تعریف شود.

رویداد های زیادی وجود دارند که در مراحل مختلف درگ(کشیده شدن) و دراپ(رها شدن) استفاده می شوند:

رویداد هایی که در مرحله ی درگ به وجود می آیند:

ondragstart: زمانی روی می دهد که کاربر شروع به درگ کردن(کشیدن) یک عنصر می کند.
ondrag: زمانی روی می دهد که یک عنصر در حال درگ شدن(کشیده شدن) است.
ondragend: زمانی روی می دهد که کاربر درگ کردن(کشیدن) را پایان دهد.

رویداد هایی که در مرحله دراپ(رها شدن) به وجود می آیند:

ondragenter: زمانی روی می دهد که عنصر درگ شده(کشیده شده)، وارد منطقه رها شدن(دراپ) می شود.
ondragover: زمانی روی می دهد که عنصر درگ شده(کشیده شده) بر روی منطقه رها شدن(دراپ) قرار بگیرد.
ondragleave: زمانی روی می دهد که عنصر درگ شده(کشیده شده) منطقه رها شدن(دراپ) را ترک می کند.
ondrop: زمانی روی می دهد که عنصر درگ شده(کشیده شده) بر روی منطقه رها شدن(دراپ)، رها شود.

پشتیبانی مرورگرها

اعداد داخل جدول نشان دهنده ی اولین ورژن مرورگری است که به طور کامل از این رویداد پشتیبانی می کند:

Event
ondragstart	4.0	9.0	3.5	6.0	12.0

نحوه استفاده

در HTML:

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

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

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

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

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

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

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

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

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

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

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

<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

: نوشته شده توسط احسان عباسی; بازدید: 6515

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی