Angular7实现拖放Drag Drop示例详解_AngularJs

拖放函数

angular 7 cdk中新增的拖放函数有助于从列表中拖放元素，我们将通过一个示例来理解拖放函数。我们需要先下载依赖项，如下所示-

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'导入的，并且该模块已添加到导入数组，如上所示。

myservice.service.ts

<a target="_blank"  href="http://jsonplaceholder.typicode.com/users" 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"  href="http://jsonplaceholder.typicode.com/users" 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变量中提供了所需的数据。现在让我们使用它来显示给用户，如下所示-

<a target="_blank"  href="http://jsonplaceholder.typicode.com/users" 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>

突出显示的是执行拖放所需的所有属性。当您在浏览器中签入时，它允许您拖动项目。它不会将其放置在列表中，并且保留在您离开鼠标指针时的状态。

在这里，它允许从列表中拖动项目，但是一旦您离开鼠标指针，它将移至同一位置。要添加放置函数，我们需要在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函数负责将拖动的项目放置在所需位置。

它利用了我们从cdk dragdrop模块导入的 moveiteminarray 和 transferarrayitem 。

现在让我们在浏览器中再次查看演示-