Version 5 (modified by amachang, 4 years ago)

--

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

要素

  • ドラッグされる要素 (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 失敗を通知することができる