ドラッグアンドドロップの概念

要素

• ドラッグされる要素 (source)
• ドロップされる要素 (target)

ドラッグのフェーズ

• マウス押下 (start drag)
• マウス移動 (drag)
• マウス押上 (end drag)

ドロップのフェーズ

• drag 時にマウスが target の上に入る (drag enter)
• drag 時にマウスが target の上を移動 (drag over)
• マウスが target の上にあるときに end drag (drag drop)
• drag 時にマウスが target の上から出る (drag out)

誤解

ドラッグというと、実際に押下したものを動かすことをイメージするが、 ExtJS のドラッグという概念は、実際に要素が移動するかどうかとは関係ない。 ドラッグ可能な要素 (source) で押下されたマウスが移動することがドラッグであり、要素が移動するか、ゴーストが移動するかなどは、カスタマイズによって変更可能。 このライブラリの主要な機能は要素云々ではなくイベントの制御。

Ext.dd.DragDropMgr? (a.k.a Ext.dd.DDM)

複数のドラッグドロップの中で一意に管理されるべきものを管理するためのオブジェクト。

Ext.dd.DragDrop?

基本的には、 source としての機能と target の機能を両方持っている。 以下のように isTarget を false にして渡すと

new Ext.dd.DragDrop('element', 'group', { isTarget: true });

target としての機能をオフにすることが出来る。

提供される機能

• source としてのイベントハンドラ (target には提供されない)
  • b4StartDrag
  • startDrag
  • b4Drag
  • onDrag
  • b4DragOver
  • onDragOver
  • b4DragOut
  • onDragOut
  • b4DragDrop
  • onDragDrop
  • onInvalidDrop
  • b4EndDrag
  • endDrag
  • b4MouseDown
  • onMouseDown
  • onMouseUp
  • onAvailable

Ext.dd.DD

Ext.dd.DragDrop? を継承

提供される機能

• 要素がマウスに合わせて移動
• スクロール

オーバーライドされるイベントハンドラ

• b4Drag
  • マウスが移動した分 dragEl を動かす
• b4MouseDown
  • 押下された要素上の位置を保存する

Ext.dd.DDProxy

Ext.dd.DD を継承

提供される機能

• dragEl を自動で生成する (initFrame 関数)
• ドラッグ開始と共に dragEl を表示 (showFrame 関数)
• ドラッグ終了と共に要素を dragEl の位置に移動し、 dragEl を非表示にする
• source としてのイベントハンドラ
  • beforeMove
    • endDrag 内で呼ばれる
  • afterDrag
    • endDrag の最後で呼ばれる

オーバーライドされるイベントハンドラ

• b4MouseDown
  • dragEl の初期位置決めするための情報を登録する
• b4StartDrag
  • dragEl を表示
• b4EndDrag
  • drag element の削除
• endDrag
  • 要素の移動

Ext.dd.DDTarget

Ext.dd.DragDrop? を継承。 init を呼ばない。 init では、 mousedown イベントのハンドリングを行っているため、 target 専用の初期化を行う。 基本的な機能は、 Ext.dd.DragDrop? と同じ。