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

#はじめに
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.idやthis.target.idというような指定で、dragしたitemのidや、drop先の要素のidが取得できる。

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