腳本之家服務器常用軟件

快捷導航

Angular7實現(xiàn)拖放Drag?Drop示例詳解

更新時間：2023年12月11日 09:43:00 作者：無涯教程

這篇文章主要介紹了Angular7實現(xiàn)拖放Drag?Drop示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

拖放函數(shù)

Angular 7 CDK中新增的拖放函數(shù)有助于從列表中拖放元素，我們將通過一個示例來理解拖放函數(shù)。我們需要先下載依賴項，如下所示-

npm install @angular/cdk --save

拖放模塊導入app.module.ts

完成上述步驟后。讓我們將拖放模塊導入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'導入的，并且該模塊已添加到導入數(shù)組，如上所示。

myservice.service.ts

<a target="_blank"   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >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);
   }
}</a>

調用app.component.ts內部的服務

完成后，調用app.component.ts內部的服務，如下所示-

<a target="_blank"   rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
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);
      });
   }
}
</a>

我們在personaldetails變量中提供了所需的數(shù)據(jù)?，F(xiàn)在讓我們使用它來顯示給用戶，如下所示-

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

我們添加了class =" divlayout"，該類的詳細信息位于app.component.css中。

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

以下屏幕將顯示在瀏覽器中-

在app.component.html中添加dragdrop cdk屬性

它不會拖放任何東西，我們需要在app.component.html中添加dragdrop cdk屬性，如下所示-

<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>

突出顯示的是執(zhí)行拖放所需的所有屬性。當您在瀏覽器中簽入時，它允許您拖動項目。它不會將其放置在列表中，并且保留在您離開鼠標指針時的狀態(tài)。

在這里，它允許從列表中拖動項目，但是一旦您離開鼠標指針，它將移至同一位置。要添加放置函數(shù)，我們需要在app.component.ts中添加onDrop事件，如下所示-

首先，我們必須導入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函數(shù)負責將拖動的項目放置在所需位置。

它利用了我們從cdk dragdrop模塊導入的 moveItemInArray 和 transferArrayItem 。

現(xiàn)在讓我們在瀏覽器中再次查看演示-

現(xiàn)在，您可以將項目拖放到所需的位置，如上所示。該函數(shù)運行非常平穩(wěn)，沒有任何閃爍問題，可以在需要時在您的應用程序中使用。

以上就是Angular7實現(xiàn)拖放Drag Drop示例詳解的詳細內容，更多關于Angular 拖放Drag Drop的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

angular中子控制器向父控制器傳值的實例
今天小編就為大家分享一篇angular中子控制器向父控制器傳值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
Angular2入門教程之模塊和組件詳解
這篇文章主要給大家介紹了Angular2入門教程之模塊和組件的相關資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
2017-05-05
angularjs下拉框空白的解決辦法
這篇文章主要為大家詳細介紹了angularjs下拉框空白的解決方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
這篇文章主要給大家介紹了關于Angular 4.x+Ionic3踩坑之Ionic 3.x界面?zhèn)髦档南嚓P資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
2018-03-03

淺談angularjs依賴服務注入寫法的注意點

下面小編就為大家?guī)硪黄獪\談angularjs依賴服務注入寫法的注意點。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

2017-04-04

AngularJS基礎知識筆記之過濾器

在我們開發(fā)中經(jīng)常需要在頁面顯示給用戶的信息需要一定處理格式化，才能顯示給用戶。比如時間本地化，或者yyyy-MM-dd HH:mm:ss格式，數(shù)字精度格式化，本地化，人名格式化等等。在angularjs中為我們提供了叫filter的指令，讓我們能夠很輕易就能做到著一些列的功能

2015-05-05