今回は、Full press-drag-release gestureについてみていきたいと思います。
Simple press-drag-release gestureでは、ドラッグ中は、ドラッグしているノードにだけ、マウスイベントが発生し、ドラッグしているノード以外のノードでは、マウスイベントが発生しませんでした。ドラッグ中に、ドラッグしているノード以外で、マウスイベントが発生するようにするためには、Full press-drag-release gestureを利用する必要があります。
Full press-drag-release gestureを開始するためには、DRAG_DETECTEDイベントで、startFullDragメソッドを呼び出します。startFullDragメソッドを呼び出すと、ドラッグ中、マウスカーソルの下にあるノードに対して、MouseDragEventが発生しますので、このイベントにハンドラを追加して、ドラッグ中の処理を行います。
MouseDragEventのイベントタイプには、以下のものがあります。
- MOUSE_DRAG_ENTERED
- MOUSE_DRAG_ENTERED_TARGET
- MOUSE_DRAG_EXITED
- MOUSE_DRAG_EXITED_TARGET
- MOUSE_DRAG_OVER
- MOUSE_DRAG_RELEASED
MOUSE_DRAG_ENTERED_TARGETとMOUSE_DRAG_EXITED_TARGETについては、MouseEventのMOUSE_ENTERED_TARGETとMOUSE_EXITED_TARGETと同様で、対象となるノードの親ノードで、キャプチャリングフェーズあるいはバブリングフェーズで、対象となるノードのMOUSE_DRAG_ENTEREDやMOUSE_DRAG_EXITEDイベントに対して、ハンドラを追加したいときに利用します。
また、startFullDragメソッドを呼び出すだけでは、ドラッグしているノードにMouseDragEventが発生し、他のノードには発生しません。ドラッグしているノード以外のノードにMouseDragEventを発生させるためには、ドラッグしているノードに対して、mouseTransparentプロパティをtrueにして、マウスイベントを透過させる必要があります。基本的には、MOUSE_PRESSEDイベントで、mouseTransparentプロパティをtrueにし、MOUSE_RELEASEDイベントでfalseにして元に戻せばよいようです。このように設定することによって、ドラッグ中は、ドラッグしているノードにはMouseDragEventは発生せず、ドラッグしているノード以外のノードに対してMouseDragEventが発生します。
実際に、イベントがどのように発生するかを、以下にのようなデモでみてみます。
左のテキストエリアには、ドラッグしているノード(青色のCircle)で発生したMouseEventとMouseDragEventを表示し、右のテキストエリアには、ドラッグしているノード以外のノード(緑色のPane)で発生したMouseDragEventを表示しています。
Simpre press-drag-release gestureでは、ドラッグ対象のノードに対して、MouseEventが以下のように発生しています。
MOUSE_PRESSED
MOUSE_DRAGGED
MOUSE_DRAGGED
...
MOUSE_DRAGGED
DRAG_DETECTED
MOUSE_DRAGGED
...
MOUSE_DRAGGED
MOUSE_RELEASED
Full press-drag-release gestureでは、mouseTransparentをfalseのままの場合は、ドラッグ対象のノードに対して、MouseDragEventが以下のように発生しています。
MOUSE_PRESSED
MOUSE_DRAGGED
MOUSE_DRAGGED
...
MOUSE_DRAGGED
DRAG_DETECTED
MOUSE_DRAG_ENTERED
MOUSE_DRAGGED
MOUSE_DRAG_OVER
MOUSE_DRAGGED
MOUSE_DRAG_OVER
...
MOUSE_DRAGGED
MOUSE_DRAG_OVER
MOUSE_DRAG_RELEASED
MOUSE_RELEASED
MOUSE_DRAG_EXITED
ドラッグが終了したときのイベント発生順は、MOUSE_DRAG_RELEASED -> MOUSE_RELEASED -> MOUSE_DRAG_EXITEDの順になっているようですので、ドラッグ終了時の処理を行う場合は、この順に着目して行うとよさそうです。
Full press-drag-release gestureでmouseTranparentをtrueにした場合は、ドラッグ対象のノードに対しては、MouseDragEventは発生せず、ドラッグ対象のノード以外のノードに対して、MouseDragEventが以下のように発生しています。
MOUSE_DRAG_ENTERED
MOUSE_DRAG_OVER
MOUSE_DRAG_OVER
...
MOUSE_DRAG_OVER
MOUSE_DRAG_RELEASED
MOUSE_DRAG_EXITED
MOUSE_DRAG_RELEASEDイベントは、対象となるノード上でマウスをリリースしたときのみ発生しています。
以上で簡単ですが、MouseDragEventがどのように発生するかがわかりましたので、次回はFull press-drag-release gestureを利用したものを作成していきたいと思います。
