angular table拖拽插件sortablejs

1、npm 安装 sortablejs

npm install sortablejs --save

// 只用这一个插件就可以实现拖拽，但是 angular 会报：无法找到模块“sortablejs”的声明文件。

再安装 ngx-sortablejs

npm install ngx-sortablejs --save

安装好后在 package.json 里查看一下版本号，如果是 3.几就行

"ngx-sortablejs": "^3.1.3",

2、调用方法：

在需要引用的module.ts里 imports SortablejsModule.forRoot({ animation: 150 })

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { SortablejsModule } from 'ngx-sortablejs'

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, SortablejsModule.forRoot({ animation: 150 })],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

home.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})

export class HomeComponent {
  items = ['1', '2', '3', '4', '5'];
}

home.component.html

<div border="1" [sortablejs]="items">
    <div *ngFor="let item of items" style="width: 200px;border: 1px solid green;height: 50px;">
        {{item}}
    </div>
</div>