ドロップ管理

drag1
drag2
drag3
drop1
drop2
drop3
drop4
drop5

解説

このスクリプトはドラッグ管理を利用したドラッグ&ドロップ処理を管理する DropManager オブジェクトのサンプルで、 「drag1」〜「drag3」までの領域を「drop1」〜「drop5」までの領域にドロップすると ドロップした領域の配色を設定するものです

また、「drag1」「drag3」がドロップできる領域は「drop1」〜「drop3」で、 「drag2」がドロップできる領域は「drop3」〜「drop5」にしてあります

DropManager オブジェクト

コンストラクタ:
  ドラッグ&ドロップの対象とコールバックを登録する

  new DropManager(dropTargets, dragManagers, handlers,...)
    dropTargets : 管理するドロップ対象要素 または 対象要素の配列
    dragManagers: ドラッグ対象のドラッグ管理オブジェクトまたは オブジェクト配列
    handlers    : ドロップ対象領域上でのドラッグ操作時に呼び出すコールバックを
                  定義したオブジェクト
                  このオブジェクトには以下のプロパティが指定できる
        dragEnter : ドロップ領域にマウスが達した時に呼び出すコールバック
        dragging  : ドロップ領域上でのドラッグ操作時に呼び出すコールバック
        drop      : ドロップ領域上でドロップ操作した時呼び出すコールバック
        dragLeave : ドロップ領域からマウスが出た時に呼び出すコールバック

ドロップ領域追加メソッド
  addDropTargets(dropTarget,...)
    dropTarget : 管理するドロップ対象要素

ドロップ領域削除メソッド
  delDropTargets(dropTarget,...)
    dropTarget : 管理するドロップ対象要素

ドロップ操作用ハンドラの追加メソッド
  addDropHandlers(handlers,...)
    handlers : コンストラクタの handlers に同じ

ドロップ操作用ハンドラの削除メソッド
  delDropHandlers(handlers,...)
    handlers : コンストラクタの handlers に同じ

ドラッグ管理追加メソッド
  attachDragManagers(dragManager,...)
    dragManager : ドラッグ対象のドラッグ管理( DragManager )オブジェクト

ドラッグ管理削除メソッド
  detachDragManagers(dragManager,...)
    dragManager : ドラッグ対象のドラッグ管理( DragManager )オブジェクト

コールバックの呼び出し形式
  dragEnterCallback(event,userArgList)
  draggingCallback (event,userArgList)
  dropCallback     (event,userArgList)
  dragLeaveCallback(event,userArgList)

  event       : DragManger のドラッグ情報オブジェクトに以下のプロパティを
                付加したもの
    dropType   : ドロップイベント種別(*1)
    dropTarget : ドロップした要素
    *1) dropType には以下の種類が指定される
        dragEnter : DropManager.DRAG_ENTER
        dragging  : DropManager.DRAGGING
        drop      : DropManager.DROP
        dragLeave : DropManager.DRAG_LEAVE

  userArgList : コールバック生成時に指定したユーザ引数

スクリプト

使用例

冒頭のサンプルスクリプトを下記に示します

上記スクリプト中に記述されている dragEffect 関数は「ドラッグ管理」で詳解している関数です

注意とヒント

●このサンプルのようにドロップ領域が重なっている場合には ドロップ領域に z-index を必ず指定してください