如何在表列中使用ng2-dragula

npm install ng2-dragula --save

import { DragulaModule } from 'ng2-dragula';

@NgModule({
  imports: [
    // 其他模块导入
    DragulaModule.forRoot()
  ],
  // 其他配置
})
export class AppModule { }

<div id="column-container">
  <div *ngFor="let column of columns" [dragula]="'column-bag'">
    {{ column }}
  </div>
</div>

import { Component } from '@angular/core';
import { DragulaService } from 'ng2-dragula';

@Component({
  selector: 'app-columns',
  templateUrl: './columns.component.html',
  styleUrls: ['./columns.component.css']
})
export class ColumnsComponent {
  columns = ['Column 1', 'Column 2', 'Column 3'];

  constructor(private dragulaService: DragulaService) {
    dragulaService.createGroup('column-bag', {
      moves: (el, container, handle) => handle.classList.contains('drag-handle')
    });
  }
}

[dragula] {
  min-height: 50px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  margin-bottom: 10px;
}

.drag-handle {
  cursor: move;
  padding: 5px;
  background-color: #ccc;
  color: #fff;
}