30
تشکر

آموزش Drag and Drop در HTML5

آموزش Drag and Drop در HTML5

آموزش Drag and Drop در HTML5(عکس را زیاد جدی نگیرید)

قبل به وجود آمدن HTML5 ما برای استفاده از ویژگی Drag and Drop حتما لازم بود از کتابخانه هایی مثل jQuery یا MooTools استفاده کنیم. حالا با استفاده از HTML5 ما میتوانیم ویژگی های Drag and Drop را پیاده سازی کنیم.

برای اینکه به یک عنصر این قابلیت را اضافه کنیم باید ویژگی draggable=true را به آن بدهیم. این ویژگی API های دیگری هم دارد که عبارتند از dragstart, drag, dragend, dragenter, dragleave, dragover و drop که از اینها هم میتوانیم استفاده کنیم.

خب APIهایی که در بالا نوشتیم نیاز به توضیح ندارد. حالا میرویم که یک عنصر قابل درگ کردن درست کنیم.

ساخت عناصر قابل درگ

همانطور که گفتیم فقط کافی است که خاصیت draggable را به آن اضافه کنیم.

<a href="#" draggable="true">Aparnet. Take me!!</a>

توجه کنید که ما الان فقط خاصیت درگ را به این عنصر دادیم و هنوز ناحیه که بشود در آن Drop انجام داد را درست نکردیم.

زمانی که به یک عنصر قابلیت Drag را میدهیم باید وقتی کاربر آن را شروع به Drag کردن کرد به مرورگر اطلاع دهیم که اینکار انجام شده است.

<a href="http://aparnet.ir" draggable="true" ondragstart="dragUser(this,event)" id="dr1">Aparnet. Take me!! num1</a>

در بالا هر وقت عنصر شروع به Drag شدن کرد ما یک تابع را فراخوانی میکنیم. خب حالا تابع جاوا اسکریپت زیر را مینویسیم. در تابع زیر ما ID عنصر مورد نظر رو در متد dataTransfer همان عنصر ذخیره میکنیم.

function dragUser(user,event){
    event.dataTransfer.setData('User',user.id);
}

ساخت ناحیه Drop

حالا باید یک ناحیه ای درست کنیم که کاربر بتواند در آن عملیات Drop را انجام دهد.

<div class="dr" ondrop="dropUser(this,event)" ondragenter="return false" ondragover="return false">
		
</div>

خب حالا اگه ما تگ a را به درون Div بکشیم کشیده میشود اما وقتی آن را رها میکنیم هیچ اتفاقی نمی افتد. در کد بالا زمانی که عملیات Drop انجام میشود ما تابع dropUser را فراخوانی میکنیم. در تابع زیر ما ابتدا ID عنصری که در تابع بالا در متد dataTransfer ذخیره کردیم را در متغیر user ذخیره میکنیم.

یعنی حالا ما ID عنصری که قرار است Drag and Drop داریم. سپس در خط بعد ما آن را منتقل میکنیم.

function dropUser(target,event){
    var user=event.dataTransfer.getData('User');
    target.appendChild(document.getElementById(user));
}

خب کار ما تمام شد.

اگر تنبل هستید و تمام کارهایی که ما در بالا انجام دادید را فقط خواندید و تمرین نکردید کد زیر تمام کارهایی است که ما کردیم. البته برای کسانی که کارهای بالا را هم انجام دادند توصیه میکنم کد زیر را امتحان کنند.

<!DOCTYPE HTML>
<html>
<head>
    <title>Drag and Drop</title>
    <style>
        .dr{
            width:300px;
            height:150px;
            background:#ccc;
            margin:5px;
            float:left;
        }
        a{color:#7a102b;float:left;clear;both}
    </style>
    <script type="text/javascript">
        function dragUser(user,event){
            event.dataTransfer.setData('User',user.id);
        }
        function dropUser(target,event){
            var user=event.dataTransfer.getData('User');
            target.appendChild(document.getElementById(user));
        }
    </script>
</head>
<body>
    <div class="dr" ondrop="dropUser(this,event)" ondragenter="return false" ondragover="return false">
        <a href="http://aparnet.ir" draggable="true" ondragstart="dragUser(this,event)" id="dr1">Aparnet. Take me!! num1</a>
        <a href="http://aparnet.ir" draggable="true" ondragstart="dragUser(this,event)" id="dr2">Aparnet. Take me!! num2</a>
		
    </div>
    <div class="dr" ondrop="dropUser(this,event)" ondragenter="return false" ondragover="return false">
		
    </div>
</body>
</html>

شما میتوانید با استفاده از ویژگی های دیگری که در ابتدای متن به آن اشاره کردیم کار خود را سفارشی بکنید. به عنوان مثال DIVیی که قرار است روی آن عملیات Drop انجام شود رنگ آن تغییر بکند و بعد از انجام این عملیات رنگ آن دوباره به حالت قبل برگردد.

  • saeed می‌گه:

    کافیه این کد را به تابع dropuser اضافه کنید :

    if (event.preventDefault) {
    event.preventDefault();
    }

  • Ali Amini می‌گه:

    عالی بود.
    داداش عکسو برنمیداشتی ما هم میخندیدیم. :)

  • سعید وکیلی می‌گه:

    وقتی یک تصویر را Drag and Drop می کنم تصویر در پنجره جدید باز می شود چجوری این مشکلو برطرف کنم؟

  • سعید وکیلی می‌گه:

    کلی خندیدیم :)

  • amirhossein می‌گه:

    عکسش خدا بود تا ده دقیقه میخندیدم

  • sani-web می‌گه:

    عکسش خیلی باحال بود


  • نظرات این مطلب بسته است.