ドラッグ処理は
Yahoo UI Library や
dojo toolkit
などのリッチクライアント用 UI に実装されています
しかし、これらの UI は動作も含めて高度に機能が実装されているために
時として、異なる動作を実装しようとする場合に戸惑う場面もあります
このような場合には、ドラッグ操作のみ管理して実際の動作をクライアント側の
スクリプトで実装した方が見通しが良いかもしれません
このスクリプトはドラッグ管理のサンプルで、
「Attach」ボタンを操作すると上の区画のドラッグ操作を有効にし、
「Detach」ボタンを操作するとドラッグ操作を無効にします
また、ドラッグ操作が有効な場合にはドラッグ対象の要素をコピーし
ドラッグ操作終了で破棄します
また、この機能は CallbackList を利用しています
コンストラクタ:
ドラッグ要素とコールバックを登録する
new DragManager(element,handlers,...)
element : ドラッグ操作対象の要素
handlers: ドラッグ操作時に呼び出すコールバックを定義したオブジェクト
このオブジェクトには以下のプロパティが定義できる
dragStart : ドラッグ開始時に呼び出すコールバック
dragging : ドラッグ処理中に呼び出すコールバック
dragEnd : ドラッグ終了時に呼び出すコールバック
コールバックの追加メソッド:
addHandlers(handlers,...)
コールバックの削除メソッド:
delHandlers(handlers,...)
ドラッグ通知を有効にするメソッド:
enable()
ドラッグ通知を無効にするメソッド:
disable()
コールバックの呼び出し形式:
dragStartCallback(event,userArgList)
draggingCallback (event,userArgList)
dragEndCallback (event,userArgList)
event : ドラッグ情報オブジェクト
プロパティ:
element : DragManager のインスタンス生成時に指定したドラッグ要素
type : イベント種別(mousedown, mousemove, mouseup)
dragType : ドラッグ通知の種類
x,y : ページ上のカーソル位置
dx,dy : 移動量( dragStart時は 0,0 )
button : マウスボタン( 0:左、1:右、2:中 )
shiftKey : シフトキー状態(on:true, off:false)
ctrlKey : Ctrlキー状態 (on:true, off:false)
altKey : ALTキー状態 (on:true, off:false)
srcElement: マウスカーソルの位置にある要素
カーソルがtextNode上にある場合は親要素が設定される
*) dragType は以下の種類が設定される
ドラッグ開始： DragManager.DRAG_START
ドラッグ中 ： DragManager.DRAGGING
ドラッグ終了： DragManager.DRAG_END
userArgList: コールバック生成時に指定したユーザ引数
冒頭のサンプルスクリプトを下記に示します
ボタン操作時には init 関数で生成した DragManager オブジェクト( dragManager ) に対して enable, disable メソッドを発行します
<div class="target" id="target1">
管理対象の要素
</div>
<button onclick="dragManager.enable ();">Attach</button>
<button onclick="dragManager.disable();">Detach</button>
●enable メソッドの多重呼び出しは無効です
Copyright(c) 2006 ShinSoft. All rights reserved.