FLATz

谷口です。

今回はRico.jsライブラリを使ったDrag&Dropのカスタマイズについて記述します。

Rico.jsの利用に必要な環境

Rico.jsはprototype.jsライブラリを必要としますので、以下からダウンロードしてRicoを使うページで一緒に読み込ませます。

• prototype.js（ソースコードダウンロード）

Rico.jsでDrag&Drop

簡単に流れを示すと以下の通りです。非常に簡単です。

• Drag&Dropさせたい要素にID属性をつける。
• DropするターゲットにID属性をつける。
• Drag&Dropさせたい要素をDragableオブジェクトとして管理オブジェクトに登録する。
• Dropする場所をDropZoneオブジェクトとして管理オブジェクトに登録する。

  var draggable = new Rico.Draggable('', 'DragElementID'); 
  dndMgr.registerDraggable(draggable); 
  dndMgr.registerDropZone(new Rico.Dropzone('DropElementID')); 
  

Drag&Drop時の動作をカスタマイズする

Drag&Drop時の動作をカスタマイズするには、Draggableクラスを継承した独自クラスを生成し、カスタマイズしたい動作の関数をオーバーライドすることで実現できます。

• 選択時の動作をカスタマイズ isSelectedメソッドをオーバーライドします。
• Drag時の動作をカスタマイズ startDragメソッドをオーバーライドします。
• Dragキャンセル時の動作をカスタマイズ cancelDragメソッドをオーバーライドします。
• Drag完了時の動作をカスタマイズ endDragメソッドをオーバーライドします。

詳しくは公式サイトにサンプルソースも用意されていますので、こちらをご覧ください。公式サイトのDraggableサンプル

同様にDropZoneも動作をカスタマイズすることが可能で、こちらもサンプルソースなど公式サイトに用意されてます。 公式サイトのDropZoneサンプル

おわりに

Drag&Dropは大抵のJavaScriptライブラリで機能提供されてます。 Ricoはprototype.jsを必要としますので、Drag&Dropだけのために使うには少々ファイルサイズが大きくなってしまいますので、 場合によってはjQueryなども検討してみると良いかもしれません。 なお、比較検討するにはDrag & Drop | Diaspar Journalが非常に参考になります。

この記事に関するお問い合わせはこちら