gwt-dnd：ドラッグ&ドロップライブラリ
taka
GWTのwidgetでdndはどういう風にやればよいのか調べていたんですが
これ、便利そうです！！
まだ、全然使ってないですが取り急ぎ。
dndよく分からないのでDialogBoxを拡張するしかない（笑）
と思っていた自分にはぴったりかな。
taka
日本語ではここの方が解説をしてくれてました。
taka
まず、
DragController
DropController
の2つがあって分かりにくいんですが、
どの Widget を Drag 対象とするか？
（DragController の makeDraggable( 対象widget ) メソッド）
どの Panel に Drop していいか？
（DragController コンストラクタで指定 or
DropController コンストラクタで指定 + DragController に結び付け）
を設定するみたいです。
Case:1
RootPanel
└─panelA （label1）
という状態で
label1 を panelA の中で D&D するには
1 : DragController dragController = new PickupDragController( panelA,
true );
2 : dragController.makeDraggable( label1 );
だけでいいみたいです。
（= DropController 不要）
1:行目のコンストラクタ第2引数が panelA への Drop可否。
true にすることにより panelA にDrop してOK。
2:行目で label1 を Drag 可能に。
※label1 が panelA 以外の何処の panel にあろうと大丈夫な模様
Case:2
RootPanel
├─panelA （label1）
└─panelB
label1 を panelA/B の両方で D&D できるようにするには
1 : DragController dragController = new PickupDragController( panelA,
true );
2 : dragController.makeDraggable( label1 );
3 : DropController dropController =
new
AbsolutePositionDropController( panelB );
4 : dragController.registerDropController( dropController );
3,4行目で panelB にもDropしてOKというサイン。
※上記コードは panelA と B を入れ替えても動作。
結局、DragControllerで重要なのは
makeDraggable( widget )
というメソッド。
コンストラクタでどっちの panel を入れようと
widget が何処のpanel に入っていようが関係なしに Drag設定ができる。
4:行目のように
dragController.registerDropController( dropController );
で ある DragControllerインスタンス dragController が
Drag可にした Widget の Drop先追加指定。
Case:3
RootPanel
├─panelA （label1）
└─panelB
label1 を panelB だけに Drop できるようにするには（一方通行）
1 : DragController dragController = new PickupDragController( panelB,
true );
2 : dragController.makeDraggable( label1 );
だけでOK.
1 : DragController dragController = new PickupDragController( panelA,
false );
2 : dragController.makeDraggable( label1 );
3 : DropController dropController =
new
AbsolutePositionDropController( panelB );
4 : dragController.registerDropController( dropController );
でもOK。
Case:4
RootPanel
├─panelA （label1）
└─panelB （label2）
panelA/B 両方で label1/2 両方を D&D 可にするには
1 : DragController dragController = new PickupDragController( panelA,
true );
2 : dragController.makeDraggable( label1 );
3 : dragController.makeDraggable( label2 );
4 : DropController dropController =
new
AbsolutePositionDropController( panelB );
5 : dragController.registerDropController( dropController );
Case:2 に3行目
dragController.makeDraggable( label2 )
を追加するだけでOK。
Case:5
RootPanel
└panelA （label1）
└─panelB
panelA/Bの両方でDrop可能にするには以下じゃ駄目
1 : DragController dragController = new PickupDragController( panelA,
true );
2 : dragController.makeDraggable( label1 );
一見 panelB にも Drop できているように見えるが
実際は panelA 上になっている。
Case:2と同様のコードにする。
以上、まだSampleをいじっただけなので
間違いや便利そうな使い方あれば教えてください。
taka
を本家で見つけました。
特定の Widget とは
button, checkbox, composite, frame, listbox, radiobutton, textbox,
textarea
などの Widget で普通に
対象の Widget に SourceMouseEvent を実装し
dragController.makeDraggable( widget );
とやってもドラッグできません。
（原因はブラウザ間の GWT が捉えられる event の差や
掴む所がないという事だったりするそうですがよくわかりません）
2つの workaround が提案されています。
1. Handle（取っ手）を付ける
ドラッグしたいWidgetの横とかに Label (取っ手として使う)などのWidgetをつけ
（必要であれば）2つともpanel に詰める。
dragController.makeDraggable( panel, handle );
で 取っ手（handle）をつかめば widget もドラッグ可能に。
2. 透明なFocusPanel を被せてFocusPanel ごとドラッグ
FocusPanelにドラッグしたいWidgetをaddし
dragController.makeDraggable( panel );
これでOK。
2.が違いを意識しないでドラッグできるので良かったです。
Composite は他にもできるようにする方法があるようですが
よく分かりませんでした。
参考
http://groups.google.com/group/gwt-dnd/browse_thread/thread/f53ea786cc5ce577/0d77fbb894b2961f