Angular5 Sort Drag Component

前置条件：先安装对应的依赖包

npm i sortablejs angular-sortablejs

内容开始：

see-sort-drag 组件

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { SortablejsOptions } from 'angular-sortablejs';
@Component({
  selector: "see-sort-drag,[see-sort-drag]",
  template: `
    <div [sortablejs]="data" [sortablejsOptions]="options">
      <ng-content></ng-content>
    </div>
  `
})
export class SeeSortDragComponent {

  @Input() data: any[] = [];
  @Input() onUpdate = value => null;


  options: SortablejsOptions;
  ngOnInit() {
    this.options = {
      onUpdate: this.onUpdate
    };
  }

}

如何使用

配置 NgModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SortablejsModule } from 'angular-sortablejs';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import {SeeSortDragComponent} from './sort-drag/sort-drag.component';
@NgModule({
  imports: [SortablejsModule.forRoot({ animation: 150 }), BrowserModule, ReactiveFormsModule, FormsModule],
  declarations: [AppComponent, HelloComponent,SeeSortDragComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { FormBuilder,FormGroup,FormControl,FormArray} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  items = ['a', 'b', 'c', 'd', 'e'];

  constructor(
    private fb:FormBuilder
  ){}

  onUpdate= data=>{
    console.log("数据变化了");
  }
}

<div see-sort-drag #data [data]="items" [onUpdate]="onUpdate">
    <div class="list-item" *ngFor="let item of data.data">{{ item }}</div>
</div>
或者
<see-sort-drag #data1 [data]="data.data" [onUpdate]="onUpdate">
    <div class="list-item" *ngFor="let item of data1.data">{{ item }}</div>
</see-sort-drag>

2018.9.22 星期六 深圳