このスクリプトはドラッグ管理を利用したドラッグ&ドロップ処理を管理する
DropManager オブジェクトのサンプルで、
「drag1」〜「drag3」までの領域を「drop1」〜「drop5」までの領域にドロップすると
ドロップした領域の配色を設定するものです
また、「drag1」「drag3」がドロップできる領域は「drop1」〜「drop3」で、
「drag2」がドロップできる領域は「drop3」〜「drop5」にしてあります
コンストラクタ: ドラッグ&ドロップの対象とコールバックを登録する 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 を必ず指定してください
Copyright(c) 2006 ShinSoft. All rights reserved.