کشیدن و رها کردن HTML5

لطفاً تصویر CodeW3C.com را به مستطیل بکشید.

کشیدن و رها کردن

کشیدن و رها کردن (Drag و Drop) یک ویژگی بسیار رایج است. این به معنای گرفتن چیزی و حرکت دادن آن به مکان دیگری است.

کشیدن و رها کردن بخشی از استاندارد HTML5 است: هر عنصر قابل حرکت است.

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

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

API
کشیدن و رها کردن 4.0 9.0 3.5 6.0 12.0

مثال HTML کشیدن و رها کردن

در زیر یک مثال ساده از کشیدن و رها کردن آورده شده است:

مثال

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>

آزمایش کنید

شاید به نظر پیچیده بیاید، اما بیایید همه بخش‌های مختلف رویدادهای کشیدن و رها کردن را بررسی کنیم.

عنصر را قابل حرکت کنید

ابتداً: برای اینکه یک عنصر را قابل حرکت کنید، ویژگی draggable را به true تنظیم کنید:

<img draggable="true">

محتوای کشیدن و رها کردن - ondragstart و setData()

سپس، مشخص می‌کنیم که چه چیزی باید وقتی عنصر حرکت می‌کند، رخ دهد.

در مثال بالا، ویژگی ondragstart یک تابع drag(event) فراخوانی کرده است که مشخص می‌کند چه داده‌هایی را باید حرکت داد.

مетод setData() داده‌های Transfer.setData() نوع داده و مقدار داده‌های قابل حرکت را تنظیم می‌کند:

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

در این مثال، نوع داده‌ها "text" است و مقدار این است که id عناصر قابل حرکت است ("drag1")。

کجا رها کنم - ondragover

رویداد ondragover تعیین می‌کند که داده‌های کشیده شده کجا می‌توانند قرار گیرند.

به صورت پیش‌فرض، داده‌ها/عناصر نمی‌توانند در داخل عناصر دیگر قرار گیرند. برای انجام عمل کشیدن و رها کردن، باید این روش‌های پیش‌فرض عناصر را جلوگیری کنیم.

این وظیفه توسط روش preventDefault() رویداد ondragover انجام می‌شود:

event.preventDefault();

پایان دادن - ondrop

وقتی داده‌های کشیده شده رها می‌شوند، رویداد drop رخ می‌دهد.

در مثال بالا، ویژگی ondrop یک تابع فراخوانی می‌کند، drop(event):

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

توضیح کد:

  • با فراخوانی preventDefault() از روش‌های پیش‌فرض مرورگر برای پردازش داده‌ها جلوگیری می‌کنیم (عملکرد پیش‌فرض رویداد drop به باز کردن به عنوان لینک است)
  • با استفاده از روش getData() از dataTransfer داده‌های کشیده شده را دریافت می‌کنیم. این روش هر نوع داده‌ای که در روش setData() به همان نوع داده تنظیم شده باشد را بازمی‌گرداند
  • داده‌های کشیده شده شناسه عنصر کشیده شده است ("drag1")
  • عنصر کشیده شده به عنصر قرار داده شده اضافه می‌شود

مثال‌های بیشتر

کشیدن و رها کردن تصویر

چگونه می‌توانم تصویر را بین دو عنصر <div> به وسیله‌ی کشیدن و رها کردن حرکت دهم:

لطفاً تصویر CodeW3C.com را به مستطیل بکشید.

آزمایش کنید