Darg and Drop در انگولار ۷ – آموزش انگولار ۷

  • سه‌شنبه 27 آگوست 2019
  • بازدید ۲۱۱ نفر

angular7 materials cdk drag and drop 6634 تصویر

Darg and Drop در انگولار ۷

Drag and Drop یکی از قابلیت های اضافه شده در نسخه ۷ فریم ورک انگولار است. این ویژگی به ما اجازه می دهد تا آیتم های یک لیست را با استفاده از ماوس جا به جا کنیم. در این بخش نحوه استفاده از این ماژول در انگولار ۷ را با کمک یک مثال بررسی خواهیم کرد.

به منظور استفاده از این ماژول ابتدا باید CDK را نصب کنید. برای اینکار می توانید از دستور زیر استفاده کنید:

خروجی دستور فوق:

angular7 materials cdk drag and drop 6634 1 تصویر

بعد از اینکه CDK نصب شد، ماژول مربوط به drag and drop را به فایل app.module.ts اضافه می کنیم. مانند نمونه زیر:

همانطور که در کد فوق مشاهده می کنید، DragDropModule را از ‘@angular/cdk/drag-drop’ ایمپورت کرده و آن را به بخش imports نیز اضافه کرده ایم.

در این مثال ما از اطلاعات موجود در آدرس http://jsonplaceholder.typicode.com/users استفاده خواهیم کرد. برای دریافت اطلاعات از آدرس فوق یک سرویس با نام myservice.service.ts ایجاد کنید و کد های زیر را در آن بنویسید:

محتوای فایل myservice.service.ts:

حال از این سرویس در داخل app.component.ts استفاده می کنیم:

اطلاعات دریافت شده در متغیر personaldetails نگهداری می شوند. با استفاده از کد زیر می توانید آن ها در صفحه نمایش دهید:

برای بهتر شدن ظاهر لیست نیز استایل زیر را به فایل app.component.css اضافه کنید:

حال اگر برنامه را اجرا کنید خروجی زیر را مشاهده خواهید کرد:

angular7 materials cdk drag and drop 6634 2 تصویر

در حال حاظر لیست ایجاد شده قابلیت darg and drop ندارد. برای افزودن این قابلیت بخش html را به صورت زیر تغییر دهید:

در کد فوق به جز خاصیت class و *ngFor سایر خاصیت ها مربوط به قابلیت drag and drop هستند.

خروجی برنامه بعد از افزودن قابلیت drag and drop:

angular7 materials cdk drag and drop 6634 3 تصویر

هنوز کار تمام نشده است و لیست بالا فقط به شما اجازه می دهد تا آیتم ها را بکشید (Drag). برای کامل شدن کار باید رویداد onDrop را در فایل app.component.ts پیاده سازی کنید.

ابتدا باید ماژول های لازم را import کنیم:

کد کامل مربوط به فایل app.component.ts:

کدهای بخش onDrop آیتم انتخاب شده را به موقعیت جدید انتقال می دهد. برای انتقال آیتم از moveItemInArray و transferArrayItem که از ماژول dragdrop وارد شده اند، استفاده کرده ایم.

در زیر می توانید خروجی نهایی برنامه را مشاهده کنید:

angular7 materials cdk drag and drop 6634 4 تصویر

ثبت نظر
ریفریش کنید!
نظرات کاربران (۱ مورد)
  1. تصویر آواتار کاربر 0
    نیما نجفی یکشنبه , 15 سپتامبر

    عالی بود خسته نباشید.