Version 12 (modified by amachang, 4 years ago)

--

Ext JS におけるドラッグアンドドロップ

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

要素

  • ドラッグされる要素 (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? と同じ。

Ext.dd.DropTarget?

Ext.dd.DDTarget を継承。 source としての機能は持たない。Ext.dd.DragSource? と共に使うことが前提。

特徴

Ext.dd.DDTarget とは違い、第二引数に config を指定する。 config は this にマージされる。 今まで、第二引数だったグループ名は config.ddGroup で設定する

提供される機能

  • オートスクロール
    • config.containerScroll を有効にする
  • target としてのイベントハンドラ
    • notifyEnter
    • notifyOver
    • notifyOut
    • notifyDrop
  • drag over したときにスタイルを変更する機能
    • config.overClass で指定する
  • drag over 中にドラッグ可能かを返す機能
    • notifyEnter, notifyOver で、(CSS のための)クラス名を返す。
      • この返されたクラス名は、呼び出し元で使用されることが望まれる。
  • drag drop 時に成功、失敗を返す
    • notifyDrop で、 true / false を返すことで、呼び出し元に成功 or 失敗を通知することができる

Ext.dd.DragSource?

Ext.dd.DDProxy を継承。 config.isTarget = false で親のコンストラクタを呼び出すため、 target としての機能は持たない。

特徴

Ext.dd.DDProxy とは違い、第二引数に config を指定する。 config は this にマージされる。 今まで、第二引数だったグループ名は config.ddGroup で設定する

提供される機能

  • dragEl として、 StatusProxy? を持つ
    • StatusProxy?.setStatus を呼び出し、ドラッグ中の状態を StatusProxy? に通知する。（これは、（CSS に使われる）クラス名となる）
    • start drag 時に StatusProxy?.update を呼び出し、 StatusProxy? 内に持つ html を更新する
    • StatusProxy?.reset は、 setStatus によって設定された情報を初期化する。（引数に true が指定された場合は、 html も初期化する）
    • StatusProxy?.repair は StatusProxy? を元の場所に戻す
  • isNotifyTarget というプロパティを持つ target に対して、 notifyEnter, notifyOver, notifyOut, notifyDrop を呼び出す。
  • source としてのイベントハンドラを持つ
    • beforeDragEnter
      • ここで false を返すと target の notifyEnter は呼び出されない
    • afterDragEnter
    • beforeDragOver
      • ここで false を返すと target の notifyOver は呼び出されない
    • afterDragOver
    • beforeDragOut
      • ここで false を返すと target の notifyOut は呼び出されない
    • afterDragOut
    • beforeDragDrop
      • ここで false を返すと target の notifyDrop は呼び出されない
    • afterDragDrop
    • afterValidDrop
    • beforeInValidDrop
    • afterInvalidDrop
    • onBeforeDrag
      • ここで false を返すと target の drag は始まらない
    • onStartDrag
    • onEnterDrag
  • dragData を持つ
    • notifyEnter, notifyOver, notifyOut, notifyDrop に通知される
    • getDragData をオーバーライドすることで、運搬するデータを変えることができる

Ext.dd.DropZone?

Ext.dd.DropTarget? を継承。

Ext.dd.DragZone?

Ext.dd.DragSource? を継承。

提供される機能