استفاده از Drag and Drop API به دو روش (جاوااسکریپت خالص و جی کوئری)

هر تگ HTML میتواند اتریبیوت های draggable=”true” یا dropable=”true” داشته باشد تا قابل درگ کردن یا قابل دروپ شدن باشد.
درگ دروپ میتواند پیچیده (مثلا سنگ کاغذ قیچی) یا ساده (مثل جابجا کردن ترتیب آیتم های یک لیست) باشد. اینجا ساده ترین نمونه را با هم امتحان میکنیم. در ریپوسیتوری گیتهاب که شامل دو branch است این مینی پروژه یکبار با جاوااسکریپت خالص و یکبار با جی کوئری انجام شده است.

توضیحات کلی

در این مینی پروژه یک لیست از چهار ایتم داریم. که زیر هم نمایش داده شده اند. باید هریک از این ایتم ها قابل درگ کردن باشند.

هدف این است که چهار ایتم را بتوان در لیست جابجا کرد.

بدین منظور باید بتوان هر ایتم را از جای خود با موس برداشت و حرکت داد. کافیست اتریبیوت draggable را به ان اضافه کنیم.

قبل از هر ایتمی که اتریبیوت draggable دارد، یک تگ دیو با اتریبیوت dropable قرارداده شده که نشان داده نمیشود. فقط زمانی که ایتمی را درگ کنیم و روی ان ببریم (حالت drag enter) به رنگ ابی اسمانی در می اید.

وقتی ایتم دروپ میشود، (حالت drop) انگاه ایتم همانجا ظاهر میشود. اینکه تشخیص بدهیم کدام ایتم درگ شده که اینجا ظاهر شود با dataTransfer مشخص میشود. با تماشای کدهای پروژه در گیتهاب همه چیز را میفهمید!

اجرای پروژه

پیشنیاز: دانلود کدها از گیتهاب

ریپوسیتوری گیتهاب

گام 1: اضافه کردن اتریبیوت draggable به المان های مبدا  

همانطور که در کدهای پروژه میبینید المان های div ، یکی در میان دارای اتریبیوت draggable هستند.

گام 2: اضافه کردن اتریبیوت dropable به المان های مقصد  

بصورت یکی در میان المان ها دارای اتریبیوت dropable هستند.

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

گام 3: اضافه کردن رویداد onDragStart به المان مبدا

در اولین لحظه ای که ایتمی را درگ میکنیم باید اطلاعاتش را در جایی ذخیره کنیم تا هنگام دروپ کردن بدانیم کدام ایتم باید به مکان جدید منتقل شود. رویدادی که در این لحظه رخ میدهد dragStart نام دارد.

در همین رویداد تابعی تعریف میکنیم تا بگوییم اطلاعات موجود در اتریبیوت data-order را (که برای هر ایتم مقدار خاصی دارد)، بگیرد و در dataTransfer ذخیره کند.

گام 4: افزودن 4 رویداد به المان مقصد (dropable)

رویداد dragover:

این رویداد هنگامی رخ میدهد که ایتم درگ شده که همراه موس میاد روی دیو dropable قرار بگیرد. در حالت پیشفرض اتفاقاتی میافتد که نمیخواهیم پدید اید بدین منظور از preventDefault استفاده کردیم.

رویداد dragenter:

وقتی ایتم درگ شده روی دیو dropable بیاید این رویداد اجرا میشود. میخواهیم هربار که ایتم درگ شده روی مکان های مجاز برای فرود امدن قرار گرفت با رنگی شده پس زمینه کاربر متوجه بشود که میتواند در این مکان ایتم را رها کند.

رویداد dragleave:

همانطور که هنگام dragenter پس زمینه رنگی شد باید هنگام کنار رفتن ایتم رنگش هم سفید شود.

رویداد drop:

وقتی کاربر ایتم درگ شده را رها کند رویداد drop اجرا میشود. در فانکشنی که در این رویداد تعریف کردیم، اتفاقات اصلی داستان ما رقم خورده است.

ابتدا رنگ پس زمینه مانند حالت dragleave سفید شده است.

مقدار dataTransfer اینجا به کار امده است تا بگوید کدام ایتم درگ شده است.

حالا ایتم درگ شده به همراه المان قبلی اش که یک دیو dropable بود به خانه جدید خود خوش قدم میشوند. (به آنها تبریک میگوییم! خانه جدید مبارک!!)

گام بعدی

در فرانت اند با جاوااسکریپت میتوان کارهای جالبی انجام داد. با نگه داشتن کلیک چپ موس, کشیدن و رها کردن یک المان در صفحه بروزر, رویداد های درگ دروپ اجرا میشوند  Drag and Drop که اختصارا DnD مینویسیم. یک API محسوب میشود. این API دارای رویداد های زیادی است.

برای اطلاعات بیشتر درباره درگ دروپ میتوانید دوره اموزشی لیندا را دانلود و تماشا کنید!