前言
翻翻
sortable.js的文档发现sortable.js支持Vue、React、Angular，于是我们按文档使用方法引入，发现但是angular会报：无法找到模块“sortablejs”的声明文件，那么我们现在就来看正确打开方式，
1.安装
我们不仅需要安装
sortablejs插件，还需要安装ngx-sortablejs插件，并且ngx-sortablejs版本需要在3.几就可以，该文使用"ngx-sortablejs": "^3.1.3",
npm install sortablejs --save
npm install ngx-sortablejs@3.1.3 --save
2.使用方法
（1）在需要引用的module.ts里imports SortablejsModule.forRoot({ animation: 150 })
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SortablejsModule } from 'ngx-sortablejs'
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
SortablejsModule.forRoot({ animation: 150 }),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<div class="box" [sortablejs]="arr" >
<div *ngFor="let item of arr" class="item">{{item}}</div>
</div>
<style>
.box{
display: flex;
}
.item{
width: 50px;
height:50px;
line-height:50px;
text-align: center;
margin: 20px;
background-color: green;
}
</style>
（2）配置拖拽选项及结束方法，方便我们对数据进行操作，import {SortablejsOptions} from 'ngx-sortablejs'
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SortablejsModule } from 'ngx-sortablejs'
import {SortablejsOptions} from 'ngx-sortablejs'
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
SortablejsModule.forRoot({ animation: 150 }),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<div class="box" [sortablejs]="arr" [sortablejsOptions]="options">
<div *ngFor="let item of arr" class="item">{{item}}</div>
</div>
<style>
.box{
display: flex;
}
.item{
width: 50px;
height:50px;
line-height:50px;
text-align: center;
margin: 20px;
background-color: green;
}
</style>
app.component.ts
配置option
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'my-angular-project';
arr=[0,1,2,3,4,5];
options: { group:string,onEnd:(evt:any)=>void};
constructor() {
this.options = {
group: 'test',
onEnd: function (/**Event*/evt) {
console.log(evt) // 可以获取到旧下标及新下标
},
};
}
ngOnInit(){
}
}
3.分组拖拽
与dragable相同只要option配置为相同group名字即可 app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'my-angular-project';
arr=[0,1,2,3,4,5];
arr1=[6,7,8,9,10,11];
options: { group:string,onEnd:(evt:any)=>void};
constructor() {
this.options = {
group: 'test',
onEnd: function (/**Event*/evt) {
console.log(evt)
},
};
}
}
app.component.html
<div class="box" [sortablejs]="arr" [sortablejsOptions]="options" [sortablejsCloneFunction]="myCloneImplementation">
<div *ngFor="let item of arr" class="item">{{item}}</div>
</div>
<div class="box"[sortablejs]="arr1" [sortablejsOptions]="options" [sortablejsCloneFunction]="myCloneImplementation">
<div *ngFor="let item of arr1" class="item">{{item}}</div>
</div>
<style>
.box{
display: flex;
}
.item{
width: 50px;
height:50px;
line-height:50px;
text-align: center;
margin: 20px;
background-color: green;
}
</style>
4.相关文档
angular-sortablejs是ngx-sortablejs的旧名字，npm仓库中ngx-sortablejs的文档应该还没有搬迁，可以查看angular-sortablejs进行更多文档配置
