2017年01月15日

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

Angular 2のng2-dragulaでドラッグアンドドロップする。ng2-draguladragulaというドラッグアンドドロップ制御表のライブラリの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
タグ:Angular 2
posted by ねこまんま at 21:25 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/445952000
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック