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

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

آزادانه امتحان کنید