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の指定を忘れずに。