Angular 2のng2-dragulaでドラッグアンドドロップ

Angular 2のng2-dragulaでドラッグアンドドロップする。ng2-dragulaはdragulaというドラッグアンドドロップ制御表のライブラリのOfficial Angular2 wrapper 。npm で dragula と ng2-dragulaをあらかじめインストール。

npm install ng2-dragula dragula --save

ng2-dragulaをインストールしてimportsしておく。

import { DragulaModule } from 'ng2-dragula';
...
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    DragulaModule
  ],
  providers: [],
  bootstrap: [AppComponent]
});

dragula属性などを付与することで、ドラッグアンドドロップにすることができる。

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `
<h1>My First Angular 2 App</h1>
<div>
  <div class='wrapper'>
    <div class='container' [dragula]='"first-bag"'>
      <div>Drag/drop item 1</div>
    </div>
    <div class='container' [dragula]='"first-bag"'>
      <div>Drag/drop item 2</div>
    </div>
  </div>
</div>
  `,
  styles:[`
.dnd-drag-start {
    -moz-transform:scale(0.8);
    -webkit-transform:scale(0.8);
    transform:scale(0.8);
    opacity:0.7;
    border: 2px dashed #000;
}
.dnd-drag-enter {
    opacity:0.7;
    border: 2px dashed #000;
}
.dnd-drag-over {
    border: 2px dashed #000;
}
.dnd-sortable-drag {
  -moz-transform:scale(0.9);
  -webkit-transform:scale(0.9);
  transform:scale(0.9);
  opacity:0.7;
  border: 1px dashed #000;
}
  `]

})
export class AppComponent {
 
}

参考：ng2-dndを使って、Angular2でドラッグアンドドロップ - Qiita