آموزش طراحی سایتآموزش HTML

آشنایی با Drag و Drop در HTML

آموزش Drag And Drop یا همون بکش و رها کن در HTML

منظور از Drag و Drop چیست؟ اصلا Drag And Drop چیست؟ آموزش Drag و Drop در HTML … چگونه می‌توانیم از HTML برای API مربوط به Drag و Drop استفاده کنیم؟

کار با drag و drop در HTML

کشیدن و رها کردن یا Drag و Drop یکی از رایج ترین ویژگی های کار با کنترل ها است. در این نوع حرکت کاربر ابتدا یک شی را می گیرد و سپس با کشیدن و رها کردن آن در مکان دیگر مکان آن را تغییر می دهد.

در html5، عملکرد کشیدن و رها کردن جزء استاندارد این نسخه است. همه عناصر قابل کشیدن هستند. پس بیاین در جلسه از مجموعه آموزش متن محور HTML ، در رابطه با استفاده از API مربوط به Drag و Drop بیشتر صحبت کنیم.

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

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

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 120px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<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>

<p>Drag the Mizfa image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://mizfa.com/blog/wp-content/uploads/2018/10/logo-blog-main.png" draggable="true" ondragstart="drag(event)" width="336" height="100">

</body>
</html>

کد های بالا ممکن است پیچیده به نظر بیایند، اما بگذارید تمام رویداد های این عملکرد را با هم بررسی کنیم. برای آشنایی با تگ img که در این کد استفاده شده است، می‌توانید مقاله مربوط به آموزش تصاویر در HTML را بخوانید.

فعال کردن ویژگی کشیدن در عنصر

قبل از هر چیزی باید عنصر مورد نظر را قابل کشیدن کنیم با خاصیت draggable و مقدار true این مسئله حل می شود.

<img draggable="true">

چه چیزی بکشیم – ondragstart و setdata

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

تابع datatransfer.setdata نوع داده و مقدار داده کشیده شده را تعیین می کند.

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

در این مثال، نوع داده “text” است و مقدار آن شناسه عنصر قابل کشیدن.

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

در رویداد ondragover، رویداد تعیین می کند کجا داده ها باید رها شوند.

به صورت پیش فرض، داده یا عنصر مورد نظر نمی توانند در سایر عناصر رها شوند. برای دادن اجازه رها سازی برروی سایر عناصر باید مانع اجرای پیش فرض رویداد رها کردن در عنصر مقصد شویم.

این مشکل با فرخوانی event.preventdefault در رویداد ondragover حل می شود:

event.preventDefault()

انجام رها سازی – ondrop

هنگامی که داده ها رها می شوند، یک رویداد رها سازی اجرا می شود.

در مثالی که در بالا آورده بودیم، تابع ondrop یک تابع به نام drop را که در پایین آورده ایم صدا می‌زند.

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

فرخوانی preventdefault برای ممانعت از اجرای پیش فرض مدیریت داده(به صورت پیش فرض بازکردن به عنوان لینک در هنگام رها سازی).

دریافت داده های کشیده شده توسط تابع datatransfer.getdata. این تابع هر داده ای که برای تابع setdata تنظیم شده است را با همان نوع داده ای بازگشت می دهد.

داده رویداد کشیده شدن در واقع شناسه عنصر کشیده شده است.

چسباندن عنصر کشیده شده در عنصر رها شده.

مثال کاربردی :

36873

در مثال بالا یک نمونه Drag و Drop را مشاهده می‌کنید که می‌توانید یک تصویر که لوگو میزفا هست را جا به جا کنید و به قولی بکشید و در کادر خالی رها کنید.

نتیجه گیری

در این مقاله با Drag و Drop در HTML آشنا شدیم. امیدوارم با آن آشنا شده باشید.

اگر سوال، پیشنهاد یا انتقادی داشتید لطفا حتما آن را بپرسید و من حتما آن‌ها را در اولین فرصت پاسخ خواهم داد.

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


حداکثر حجم فایل برای آپلود: 1 مگابایت.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
Share via
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر