آموزش API دِرگ و درآپ در HTML

Ratings
(0)

 

در HTML، هر عنصری می تواند درگ(drag) و درآپ( drop) شود؛ یعنی به ترتیب، می تواند کشیده یا رها شود.

مثال:

تصویر W3Schools را درگ کنید(بکشید) و در مستطیل خالی  درآپ(رها) کنید:

W3Schools

درگ و درآپ

استفاده از درگ و درآپ بسیار متداول است. ما با درگ کردن، یک شیء را گرفته و حرکت می دهیم و با درآپ، آن را در مکانی متفاوت رها می کنیم.

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

اعداد درون جدول زیر، اولین ورژن مرورگری را مشخص می کنند که کاملاً از درگ و درآپ پشتیبانی می کند:

API
 4.0  9.0  3.5  12.0  6.0 درگ و درآپ

مثالی از درگ و درآپ در HTML

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

مثال شماره 1

<!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) را فراخوانی می کند که مشخص می کند که چه داده ای باید درگ شود. متد dataTransfer.setData() نوع داده و مقدار داده ی درگ شده را تنظیم می کند.

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

در این مورد، نوع داده "text" است و مقدارِ(value) مورد نظر، id عنصر قابل درگ شده، یعنی "drag1" می باشد.

در کجا می خواهیم درآپ کنیم- توضیح رویداد ondragover

رویداد ondragover مشخص می کند که داده ی درگ شده می تواند درآپ شود یا نه. به طور پیش فرض، داده یا عناصر، نمی توانند در دیگر عناصر درآپ شوند. برای اینکه امکان درآپ شدن را فراهم کنیم، باید از مدیریت پیش فرضِ این عنصر(توسط مرورگر) جلوگیری کنیم. برای انجام این کار، باید متد event.preventDefault() را برای رویداد ondragover فراخوانی کنیم. برای دریافت اطلاعات بیشتر در مورد این متد، می توانید این مقاله را به زبان انگلیسی مطالعه کنید. 

event.preventDefault()

انجام درآپ - توضیح رویداد ondrop

وقتی که داده ی درگ شده، درآپ شد، یک رویداد درآپ(drop event) رخ می دهد. در مثال بالا، خصوصیت ondrop یک تابع یعنی drop(event) را فراخوانی می کند:

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

توضیح کدهای بالا:

1. ما با فراخوانی preventDefault()، از مدیریت پیش فرض داده توسط مرورگر، اجتناب(prevent) می کنیم.

2. با استفاده از متد dataTransfer.getData() داده ی درگ شده را دریافت می کنیم. این متد، هر داده ای که از همین نوع، در متد setData() تنظیم شده باشد را برمی گرداند.

3. داده ی درگ شده، id عنصرِ درگ شده("drag1") است.

4. اضافه کردن عنصر درگ شده در عنصر درآپ.

 

مثال شماره 2

چگونه یک تصویر را با درگ و درآپ کردن، بین دو عنصر <div> ، جلو و عقب ببریم:

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));
}
امتحان کنید

 

  • بازدید: 206

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال