100% کامل شده تا

کشیدن و رها کردن بوسیله API در اچ‌تی‌ام‌ال (HTML Drag and Drop API)

از موتو کد، دانشنامهٔ برنامه‌نویسی


در HTML، هر عنصری را می‌توان درگ و رها کرد.


مثال

تصویر w3schools را داخل مستطیل بکشید.[۱]

W3Schools



کشیدن و رها کردن (Drag and Drop)

Drag and Drop یکی از ویژگی‌های بسیار رایج است؛ یعنی زمانی که شما یک شیء را «برمی‌دارید» و آن را به مکان متفاوتی می‌کشید.



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

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

API Chrome Internet Explorer / Edge Firefox Safari Opera
Drag and Drop ۱۲٫۰ ۶٫۰ ۳٫۵ ۹٫۰ ۴٫۰


مثال‌های Drag and Drop در HTML

مثال زیر، نمونهٔ ساده‌ای از drag and drop است:

مثال
<!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>

Responsive demo.svg





ممکن است پیچیده به نظر برسد اما بیایید همهٔ قسمت‌های مختلف رویداد drag and drop را بررسی کنیم.



یک عنصر قابل کشیدن بسازید

اول از همه: برای اینکه یک عنصر قابل کشیدن باشد، ویژگی draggable آن را برابر با true قرار می‌دهیم:

<img draggable="true">


چه چیزی را Drag کنیم - ondragstart و setData()

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

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

متد dataTransfer.setData() نوع داده و مقدار دادهٔ drag شده را مشخص می‌کند.

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


در این حالت، نوع داده "text" و مقدار آن شناسه عنصر، draggable است ("drag1").



کجا رها کنیم - ondragover

رویداد ondragover محل drop شدن دادهٔ drag شده را تعیین می‌کند.

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

این کار با فراخوانی متد event.preventDefault() برای رویداد ondragover انجام می‌شود:

event.preventDefault()


انجام ondrop - Drop

هنگامیکه دادهٔ drag شده، drop می‌شود، رویداد drop رخ می‌دهد.

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

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


توضیح کد:

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


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

نحوهٔ کشیدن (و انداختن) تصویر به جلو و عقب بین دو عنصر <div>:

Responsive demo.svg

منابع آموزشی




به‌روزرسانی شده: ۲۳ روز پیش