پاشنه‌ی 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() dataTransfer داده‌های قابل کشیدن را تنظیم می‌کند: نوع داده و ارزش:

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 را به مستطیل بکشید.

آزمایش کنید