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

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

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش Drag and Drop در انگولار ۷ خواهیم پرداخت.

ویژگی جدید Drag and Drop اضافه شده به انگولار ۷ CDK به کشیدن و رها کردن عناصر از لیست کمک می کند. با استفاده از یک مثال کار Drag and Drop Module را درک خواهیم کرد. این ویژگی به cdk اضافه شده است. ابتدا باید وابستگی را مانند شکل زیر دانلود کنیم –

npm install @angular/cdk --save

پس از انجام مرحله بالا. اجازه دهید ماژول کشیدن و رها کردن را در app.module.ts مطابق شکل زیر وارد کنیم –

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

DragDropModule از ‘@angular/cdk/drag-drop’ وارد می‌شود و ماژول همانطور که در بالا نشان داده شده است به واردات آرایه اضافه می‌شود.

ما از جزئیات api، (http://jsonplaceholder.typicode.com/users) برای نمایش روی صفحه استفاده خواهیم کرد. ما سرویسی داریم که داده ها را از api همانطور که در زیر نشان داده شده است – واکشی می کند

myservice.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
   providedIn: 'root'
})
export class MyserviceService {
   private finaldata = [];
   private apiurl = "http://jsonplaceholder.typicode.com/users";
   constructor(private http: HttpClient) { }
   getData() {
      return this.http.get(this.apiurl);
   }
}

همانطور که در زیر نشان داده شده است با سرویس داخل app.component.ts تماس بگیرید –

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   public personaldetails = [];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.personaldetails = Array.from(Object.keys(data), k=>data[k]);
         console.log(this.personaldetails);
      });
   }
}

ما داده های مورد نیاز را در متغیر personaldetails در دسترس داریم. اکنون اجازه دهید از همان چیزی که در زیر نشان داده شده است برای نمایش به کاربر استفاده کنیم

<h3>Angular 7 - Drag and Drop Module</h3>
<div>
   <div *ngFor="let item of personaldetails; let i = index" class="divlayout”>
      {{item.name}}
   </div >
</div>

ما class = “divlayout” را اضافه کرده ایم و جزئیات کلاس در app.component.css است.

.divlayout{
   width: 40%;
   background-color: #ccc;
   margin-bottom: 5px;
   padding: 10px 10px;
   border: 3px solid #73AD21;
}

صفحه زیر در مرورگر نمایش داده می شود –

چیزی را نمی‌کشد و رها نمی‌کند، باید ویژگی‌های dragdrop cdk را در app.component.html همانطور که در زیر نشان داده شده است اضافه کنیم.

<h3>Angular 7 - Drag and Drop Module</h3>
<div cdkDropList
   #personList = "cdkDropList"
   [cdkDropListData] = "personaldetails"
   [cdkDropListConnectedTo] = "[userlist]"
   class = "example-list"
   (cdkDropListDropped) = "onDrop($event)" >
   
   <div *ngFor = "let item of personaldetails; 
      let i = index" class = "divlayout" cdkDrag>
      {{item.name}}
   </div >
</div&t;

موارد برجسته شده تمام ویژگی های مورد نیاز برای انجام کشیدن و رها کردن هستند. وقتی مرورگر را بررسی می کنید، به شما امکان می دهد مورد را بکشید. وقتی نشانگر ماوس را رها می‌کنید، آن را در لیست نمی‌اندازد و همانطور که هست باقی می‌ماند.

در اینجا اجازه می دهد تا مورد را از لیست بکشید، اما هنگامی که نشانگر ماوس را ترک کردید، می رود و در همان مکان قرار می گیرد. برای افزودن ویژگی drop، باید رویداد onDrop را مانند شکل زیر در app.component.ts اضافه کنیم –

ابتدا باید ماژول‌های dragdrap cdk را مطابق شکل زیر وارد کنیم

import {CdkDragDrop, moveItemInArray, transferArrayItem} 
from '@angular/cdk/drag-drop';

در اینجا کد کامل در app.component.ts – آمده است

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   public personaldetails = [];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.personaldetails = Array.from(Object.keys(data), 
         k=>data[k]);
         console.log(this.personaldetails);
      });
   }
   onDrop(event: CdkDragDrop<string[]>) {
      if (event.previousContainer === event.container) {
         moveItemInArray(event.container.data, 
            event.previousIndex, event.currentIndex);
      } else {
         transferArrayItem(event.previousContainer.data,
         event.container.data,
         event.previousIndex,
         event.currentIndex);
      }
   }
}

تابع onDrop از انداختن آیتم در موقعیت مورد نیاز مراقبت می کند.

از moveItemInArray و transferArrayItem که از ماژول dragdrop cdk وارد کرده ایم استفاده می کند.

اکنون اجازه دهید نسخه ی نمایشی را دوباره در مرورگر مشاهده کنیم –

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

منبع.

لیست جلسات قبل آموزش انگولار ۷

1. آموزش انگولار ۷
2. آموزش نمای کلی انگولار ۷
3. آموزش راه اندازی محیط انگولار ۷
4. آموزش راه اندازی پروژه در انگولار ۷
5. آموزش اجزای سازنده در انگولار ۷
6. آموزش ماژول ها در انگولار ۷
7. آموزش اتصال داده در انگولار ۷
8. آموزش اتصال رویداد در انگولار ۷
9. آموزش تمپلیت ها در انگولار ۷
10. آموزش دستورالعمل ها در انگولار ۷
11. آموزش پایپ ها در انگولار ۷
12. آموزش مسیریابی در انگولار ۷
13. آموزش سرویس ها در انگولار ۷
14. آموزش Http Client در انگولار ۷
15. آموزش درخواست های CLI در انگولار ۷
16. آموزش فرم ها در انگولار ۷
17. آموزش پیمایش مجازی در انگولار ۷