قابلیت کشیدن و رها کردن (ngDragDrop) در انگولار – به زبان ساده

انگولار 7 با برخی قابلیت‌های جالب و جدید انتشار یافته است. در این راهنما به توضیح قابلیت کشیدن و رها کردن یعنی امکان ngDragDrop در انگولار می‌پردازیم. به این منظور یک اپلیکیشن می‌سازیم که داده‌ها را از پایگاه داده واکشی و آن‌ها را به رابط کاربری وصل می‌کند؛ سپس عملیات کشیدن و رها کردن را به صورت چند جهتی اجرا می‌کند.

برای مشاهده کد منبع پروژه‌ای که در این راهنما بررسی می‌کنیم، می‌توانید به این آدرس (+) مراجعه کنید.

نصب Angular CLI

چنان که احتمالاً حدس می‌زنید ما در این راهنما از Angular CLI استفاده می‌کنیم. اگر هنوز Angular CLI را نصب نکرده‌اید، پیشنهاد می‌کنیم هم‌اینک آن را نصب کنید (+). این یک CLI عالی برای انگولار است و مطمئناً از آن لذت خواهید برد. با اجرای دستور زیر می‌توانید آن را نصب کنید:

npm install -g @angular/cli

زمانی که این پروژه راه‌اندازی شد، از دستورهای Angular CLI استفاده خواهیم کرد. مستندات Angular CLI (+) به شما کمک می‌کند که بدانید با این CLI چه کارهایی می‌توانید انجام دهید.

فیلم آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS در فرادرس

کلیک کنید

ایجاد یک پروژه جدید

اینک زمان آن رسیده است که پروژه جدیدی را ایجاد کنیم. به این منظور از دستور زیر استفاده می‌کنیم:

ng new ngDragDrop

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

ng serve --open (if you need to open the browser by the app)

ng serve (if you want to manually open the browser).

You can always use 'ng s' as well

دستور فوق اپلیکیشن ما را ایجاد و آن را در مرورگر اجرا می‌کند. در زمان توسعه از Angular material برای طراحی استفاده خواهیم کرد. آن را به همراه انیمیشن و CDK می‌توانید نصب کنید. از نسخه‌های 6 به بالای انگولار این کار را با استفاده از دستور زیر نیز می‌توان انجام داد:

ng add @angular/material

تولید و راه‌اندازی کامپوننت هدر

اکنون اپلیکیشنی داریم که می‌توانیم روی آن کار کنیم و نوبت آن رسیده است که یک کامپوننت هدر بسازیم.

ng g c header

دستور فوق همه فایل‌هایی که برای کار با اپلیکیشن نیاز داریم را ایجاد می‌کند و این کامپوننت را به app.module.ts نیز اضافه می‌کند.

ما صرفاً HTML کامپوننت هدر را ویرایش می‌کنیم و قرار نیست هیچ منطقی به آن اضافه کنیم. البته شما می‌توانید بسته به نیاز خود مواردی را به آن بیفزایید.

راه‌اندازی کامپوننت فوتر

با اجرای دستور زیر کامپوننت فوتر را ایجاد می‌کنیم:

ng g c footer

می‌توانید بسته به میل خود آن را ویرایش یا استایل‌دهی کنید:

راه‌اندازی فایل app-routing.module.ts

ما قصد داریم تنها یک مسیر برای صفحه اصلی بسازیم:

راه‌اندازی خروجی روتر در فایل app.component.html

اکنون یک مسیر داریم و زمان آن رسیده که یک خروجی تنظیم کنیم:

راه‌اندازی فایل app.module.ts

هر اپلیکیشن انگولار دست کم یک کلاس NgModule به نام AppModule دارد که در فایل app.module.ts جای می‌گیرد. برای کسب اطلاعات بیشتر در مورد معماری انگولار به وب‌سایت آن (+) مراجعه کنید.

آیا در این کد ماژول DragDropModule را دیدید؟ برای استفاده از قابلیت کشیدن و رها کردن باید آن را ایمپورت کنید. این قابلیت در بخش angular/cdk/drag-drop@ جای می‌گیرد. آن چنان که احتمالاً متوجه شده‌اید، ما یک سرویس به نام MovieService در آرایه ارائه‌دهنده افزوده‌ایم. اینک آن را می‌سازیم.

ایجاد یک سرویس فیلم به نام MovieService

همچنان که مشاهده می‌کنید هنوز کار چندانی روی کلاس سرویس انجام نداده‌ایم و مکانیسم خطا و دیگر مواردی را که لازم است پیاده نکرده‌ایم تا در حد امکان خلاصه باشد.

این سرویس فیلم‌ها را از یک پایگاه داده آنلاین به نام TMDB واکشی می‌کند. در این مقاله و در این ریپازیتوری ما از فایل خودمان استفاده می‌کنیم. به شما نیز پیشنهاد می‌کنیم که به جای موردی که اشاره شد، از فایل خودتان استفاده کنید. در ادامه فایل پیکربندی را تنظیم می‌کنیم.

راه‌اندازی فایل config.ts

فایل پیکربندی روشی برای چیدمان چیزهای مختلف به صورت راحت ارائه می‌کند و می‌بایست در همه پروژه‌هایی که روی آن‌ها کار می‌کنید یک چنین فایلی را پیاده‌سازی کنید:

ایجاد کامپوننت فیلم

در این بخش یک کامپوننت فیلم می‌سازیم که اطلاعات فیلم در آن جای می‌گیرد. در واقع ما از این کامپوننت فیلم درون یک div به نام cdkDropList استفاده می‌کنیم. کامپوننت فیلم ما دارای یک HTML به صورت زیر است:

ما آن را تا حد امکان ساده ساخته‌ایم. در آینده می‌توانیم چند مشخصه دیگر نیز به کامپوننت فیلم خود اضافه کنیم و آن‌ها را اینجا نمایش دهیم. فایل تایپ‌اسکریپت یک مشخصه به همراه دکوراتور Input@ خواهد داشت تا بتوانیم مقادیری را از کامپوننت home اضافه کنیم.

همچنان که اشاره کردیم این مدل فعلاً تنها یک مشخصه دارد و در آینده موارد دیگری را اضافه خواهیم کرد.

راه‌اندازی کامپوننت Home

این کامپوننت بخش اصلی برنامه و جایی است که فیلم‌ها را رندر کرده و عملیات کشیدن و رها کردن را اجرا می‌کنیم. ما یک کانتینر والد به نام <;"div style="display: flex> داریم که div-های داخلی آن به صورت افقی چیدمان یافته‌اند. دو کانتینر درونی دیگر نیز داریم که یکی برای نمایش هم فیلم‌ها و دیگری برای نمایش فیلم‌هایی است که می‌خواهیم تماشا کنیم. ما می‌توانیم از کانتینر چپ فیلم‌ها را به کانتینر راست کشیده و رها کنیم و یا برعکس آن را انجام دهیم.

در این بخش HTML خود را طرحی می‌کنیم. در ادامه کل مجموعه فیلم را می‌بینید:

همچنان که می‌بینید چند مشخصه جدید وجود دارند که به هر دو کانتینر app-movie انتساب یافته‌اند:

• cdkDropList اساساً کانتینری برای آیتم‌های کشیدنی و رها کردنی محسوب می‌شود.
• "allmovies=”cdkDropList# همان ID کانتینر مبدأ ما است.
• "[cdkDropListConnectedTo]=”[towatch] شیوه اتصال دو کانتینر app-movie را نشان می‎دهد. به خاطر داشته باشید که towatch همان ID کانتینر cdkDropList دیگر است.
• "cdkDropListData]=”movies] برای توصیف شیوه انتساب داده‌های منبع به لیست استفاده می‌شود.
• "(cdkDropListDropped)=”drop($event) هر زمان که رویداد کشیدن و رها کردن رخ می‌دهد یک رویداد clalback را تعریف می‌کند.

درون کانتینر cdkDropList یک حلقه را روی مقادیر تعریف می‌کنیم و فیلم را به کامپوننت فیلم خود ارسال می‌کنیم که app-movie است. ما باید مشخصه cdkDrag را در آیتم کشیدنی که چیزی به جز فیلم نیست نیز اضافه کنیم.

در ادامه کانتینر دیگری می‌سازیم که شامل مجموعه‌ای از فیلم‌ها است و قرار است تماشا کنیم.

ما تقریباً از همان مشخصه‌هایی استفاده می‌کنیم که در کانتینر نخست استفاده کردیم به جز ID-ها که cdkDropListData و cdkDropListConnectedTo هستند.

در نهایت فایل home.component.html را به صورت زیر آماده می‌کنیم:

اکنون باید برخی داده‌ها را با فراخوانی سرویس به دست آوریم. فایل home.component.ts را باز کنید:

در این فایل CdkDragDrop ،moveItemInArray و transferArrayItem را از ‘angular/cdk/drag-drop@’ ایمپورت می‌کنیم. بدین ترتیب لازم است کشیدن و رها کردن را اجرا کنیم. در سازنده، داده‌ها را واکشی می‌کنیم و آن را به متغیر movies انتساب می‌دهیم. این یک آرایه از فیلم است.

ما مجموعه «movies to watch» را به صورت زیر تعیین می‌کنیم که شامل فیلم‌هایی است که قرار است تماشا کنیم.

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

در ادامه رویداد رها کردن را مشاهده می‌کنید.

کد کامل فایل home.component.ts به صورت زیر است:

استایل‌بندی سفارشی

ما استایل‌های سفارشی را روی برخی کامپوننت‌ها اعمال می‌کنیم که می‌توانید در ادامه مشاهده کنید.

فایل home.component.scss

فایل movie.component.scss

خروجی

پس از پیاده‌سازی همه مراحل فوق، یک اپلیکیشن داریم که از عملیات کشیدن و رها کردن انگولار 7 با داده‌های سرور واقعی استفاده می‌کند. در ادامه اپلیکیشن را اجرا کرده‌ایم و آن را در عمل می‌بینید:

دموی این اپلیکیشن را می‌توانید در این صفحه (+) مشاهده کنید. شما می‌توانید با ریپازیتوری گیت‌هاب (+) این پروژه هم کار کنید تا بر این موضوع احاطه بیشتری پیدا کنید.

فیلم مجموعه آموزش جاوا اسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز برای شما مفید خواهند بود:

• مجموعه آموزش‌های طراحی و برنامه نویسی وب
• آموزش مقدماتی AngularJS برای ساخت اپلیکیشن های تک صفحه ای
• مجموعه آموزش‌های پروژه محور برنامه نویسی
• ساخت رابط کاربری Login با انگولار (Angular) و متریال دیزاین – به زبان ساده
• ۱۰ کتابخانه و فریم‌ورک جاوا اسکریپت که باید آنها را بشناسید

==