بخش های اصلی

آموزش HTML 5

آموزش HTML 5 - کشیدن و رها کردن (Drag and Drop)

HTML5 از ویژگی کشیدن و رها کردن، بصورت ذاتی پشتیبانی می کنه.

عنصر Drag and Drop

ویژگی drag and drop به کاربر امکان کشیدن و انداختن  یک عنصر به مکان دیگر را، میده. مکانِ رها کردن (drop)ممکنه نرم افزار کاربردیِ متفاوتی باشه. با کشیدن (dragging) یک عنصر ، نمایشی کدر و غیر شفاف از عنصر، اشاره گر ماوس را دنبال می کنه.

مثال

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Drag & Drop</title>
<script type="text/javascript">
    function dragStart(e){
        // Sets the operation allowed for a drag source
        e.dataTransfer.effectAllowed = "move";
    
        // Sets the value and type of the dragged data
        e.dataTransfer.setData("Text", e.target.getAttribute("id"));
    }
    function dragOver(e){
        // Prevent the browser default handling of the data
        e.preventDefault();
        e.stopPropagation();
    }
    function drop(e){
        // Cancel this event for everyone else
        e.stopPropagation();
        e.preventDefault();
    
        // Retrieve the dragged data by type
        var data = e.dataTransfer.getData("Text");
    
        // Append image to the drop box
        e.target.appendChild(document.getElementById(data));
    }
</script>
<style type="text/css">
    #dropBox{
        width: 300px;
        height: 300px;
        border: 5px dashed gray;
        background: lightyellow;
        text-align: center;
        margin: 20px 0;
        color: orange;
    }
    #dropBox img{
        margin: 25px;
    }
</style>
</head>
<body>
    <h2>Drag & Drop Demo</h2>
    <p>Drag and drop the image into the drop box:</p>
    <div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);">
        <!--Dropped image will be inserted here-->
    </div>
    <img src="../images/kites.jpg" id="dragA" draggable="true" ondragstart="dragStart(event);" width="250" height="250" alt="Flying Kites">
</body>
</html>

نکته: می توانید یک عنصر را با تنظیم خصیصه ی draggble آن با true، قابل drag کردن کنین، مثل draggable="true". با این حال، در بیش تر مرورگرها، انتخاب های متنی، عکس ها، و لنگر گاه های عناصرِ دارای خصیصه ی href ، بصورت پیش فرض قابل درگ کردن هستن.

رویداد Drag and Drop

در مراحل مختلفِ عمل کشیدن و رها کردن، تعدادی رویداد اجرا می شن. ولی رویداد های ماوس مثل mousemove، در زمان انجام عمل کشیدن، اجرا نمیشن. جدول زیر مرور کوتاهی است بر تمام رویداد های کشیدن و رها کردن:

رویداد (Event)

توضیحات

ondragstart

زمانی که کاربر شروع به کشیدن (Dragging) عنصر می کنه، اجرا میشه

ondragenter

زمانی که یک عنصر قابل کشیدن، ابتدا به یک drop listener جابه جا میشه، اجرا میشه

ondragover

زمانی که کاربر یک عنصر را روی یک drop listener می کشه، اجرا می شه

ondreagleave

زمانی که کاربر یک عنصر را به بیرون از یک drop listener می کشه، اجرا می شه.

ondrag

زمانی که کاربر عنصری را به هر جایی بکشه، اجرا می شه؛ بصورت مدام اجرا میشه ولی می تواند مختصات X و Y اشاره گر ماوس را بده.

ondrop

زمانی که یک عنصر را بصورت موفقیت آمیز در یک drop listener رها می کنه، اجرا میشه.

ondragend

زمانی که عمل کشیدن تمام میشه، چه موفقیت آمیز باشه، چه نباشه، اجرا میشه. این رویداد زمان کشیدنِ یک فایل از صفحه ی دسکتاپ به مرورگر، اجرا نمیشه.

نکته: تمام مرورگرهای مطرح و مدرن مثال Firefox، Chrome، Opera، Safari و Internet Explorer 9+ از ویژگیِ  drag and dropدر HTML5 پشتیبانی می کنن.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش HTML 5

Learn HTML 5

سرفصل ها

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد