AngularJS

AngularJsで、Angular Drag and Dropを使ってdndを実践。

More than 5 years have passed since last update.


はじめに

AngularJsでDrag&Dropを実装する際に、便利そうなライブラリを発見したので利用してみた。


ライブラリ

Angular Drag and Drop


使い方

本家サイトのサンプルコードを確認しよう。


自分の例

自分の場合は、あるリストを一覧表示して、その各アイテムをdrop先のリストに登録するといったことをやった。


drag側のリスト側

<table><tr>

<td ng-repeat="xxxxx in dragItems"
data-drag="true"
ng-model="dragItems[$index]"
jqyoui-draggable="{index: {{$index}}, animate: true, placeholder: 'keep'}"
data-jqyoui-options="{revert: 'invalid', helper: 'clone'}">
{{xxxxx.description}}
</td>
</tr></table>

data-drag="true"とするところがポイントだろうか。

他の指定も重要そうだが。


リストを追加する側

dropAreasには、drop先のエリアをリストで保持。

data-drop="true"とするところがミソ。

<table><tr>

<td ng-repeat="p in dropAreas"
data-drop="true"
ng-model='target'
jqyoui-droppable="{multiple:true,onDrop:'onDrop'}">
{{p.description}}
</td>
</tr></table>

angularJSのController側で、$scope.onDropという関数を実装するとDrop時に処理が動くようになる。

また、コール先のonDrop関数では、this.p.idthis.target.idというような指定で、dragしたitemのidや、drop先の要素のidが取得できる。


注意

angular.module('app', ['ngDragDrop']);のように、ngDragDropの指定を忘れずに。