Angular5.0使用ngx-dnd实现拖拽功能.

前言

最近做的项目中需要实现拖拽放置的功能,网上所谓的拖拽只是通过移动元素的位置.在mouseover后根据拖动的坐标等.来判断最终的位置,并不能解决实际问题.
ngx-dnd可以实现拖拽与放置功能.使用简单方便. 官网地址
因为官网都是英文的.但是例子很直观,都能看懂的.

安装

npm i @swimlane/ngx-dnd @swimlane/dragula @types/dragula --save

但是我的本地环境是angualr5.0,所以这样安装是会报错的.

npm i @swimlane/ngx-dnd@4.0.0 @swimlane/dragula @types/dragula --save

需要安装ngx-dnd 4.0的版本. 具体版本更变请参照官网的更新日志(changelog)

使用

如果你的项目是根据angualr官方文档风格指南,做了公共的share模块.那么在shareModule里引入即可

import { NgxDnDModule } from '@swimlane/ngx-dnd';
@NgModule({
	imports: [
    NgxDnDModule
  	],
  	exports: [
  	NgxDnDModule
  	]
})

如果没有, 在app.module中引入即可.

在组件中使用.

<div class="ngx-dnd-container" ngxDroppable="example-two">
            <div class="ngx-dnd-item" ngxDraggable *ngFor="let name of showStaff; let i=index">
              {{name?.name||name?.userId?.name}}
            </div>
       </div>

这样就好了.
如果想获得拖动后的数组,这样做是远远不够的.还需要加上model属性, 通过drag事件,即可查证.
更多Api,可以查看官网,或者直接查看插件源码.

 <div class="ngx-dnd-container" ngxDroppable [model]="showStaff">
            <div class="ngx-dnd-item" ngxDraggable *ngFor="let name of showStaff; let i=index" 
             [model]="name" (drag)="dragChange($event, showStaff)">
              {{name?.name||name?.userId?.name}}
            </div>
          </div>

更多的例子,可以参照官网的Examples.