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

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

آشنایی با Drag And Drop
آشنایی با Drag And Drop

منظور از 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 را مشاهده می‌کنید که می‌توانید یک تصویر که لوگو میزفا هست را جا به جا کنید و به قولی بکشید و در کادر خالی رها کنید.

پایان ترم

[box type=”info” class=”question-from-users” width=””]

یک نمونه استفاده از Drag&Drop در وب سایت گوگل مثال بزنید.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

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

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

فیلم آموزشی asp.net core 2

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

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

6 نظر

6 پاسخ

  1. پاسخ سوال :
    وقتی عکسی رو از کامپیوتر به داخل کادر جستجو درگ می کنیم کادر بزرگتری باز میشه که عبارت «Drop image here» (عکس را اینجا رها کنید) نوشته شده است.

    1. سلام محمد. دقیقا مثلا توی Google Drive هم همچین چیزی هستش. جایزه‌ات را دریافت می‌کنی.

  2. سلام میشه لطفا بگین مشکل کدا چیه که اجرا drag and drop اجرا نمیشه؟

    1. سلام زهرا، کد هایی که استفاده کردی برای بخشی از HTML هست که مستقیما با جاوا اسکریپت در ارتباطه و زبان جاوا اسکریپت یک زبان Case Sensitive هست یعنی حساس به حروف کوچک و بزرگ.
      مثلا شما تابع preventDefault را به جای اینکه D بزرگ استفاده کنی از d کوچک استفاده کردی و برای همین کد هات کار نمیکنه.
      باقی تابع ها هم همینطور می‌بایست کوچک و بزرگ بودن حروف رو رعایت کنی.
      موفق باشی

  3. سلام
    من متوجه اون id که در تگ آوردین نشدم ممنون میشم بهم بگین

    1. سلام متوجه کدوم قسمتش نشدی ؟

      آی دی ها رو برای استایلدهیشون آوردیم وگرنه کاربرد دیگه ای ندارن. بقیه از طریق خاصیت های مشخص شده داخل پست کنترل میشن.

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

نشانی ایمیل شما منتشر نخواهد شد.

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

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=