ドラッグ&ドロップは、今日では代表的なユーザインタフェースですが、WebAPIに十分満足できる形で実装されているわけではありません。そこで、ドラッグ&ドロップのライブラリを作ってみました。動作の確認はInternetExplorer11, Chrome44.0, Edge, iPad safariで行いました。
本ライブラリはかつてNetscape社が公開していたDrag and Drop Conponentを拡張する形で開発しました。以下はそこにあったサンプルプログラムをベースにしたものです。
dragme.html:
また、以下は「じゃんけん」のプログラムです。
janken.html:
どちらも、このページ中に表示されていますので、お試しください。
dragable.jsで利用できる機能とその使い方を下表にまとめました。
プロパティまたはメソッド | 機能 |
---|---|
D=new Dragable(x, y, html) | (x,y)の位置にDragableオブジェクトを生成する |
D=new Dragable(x0, y0, x1, y1, html) | (x0~x1, y0~y1)のランダムな位置にDragableオブジェクトを生成する |
D.layer | DのレイヤID またはスタイルID |
D.ondrop=function ... | Dのdropイベントに対するイベントハンドラ |
D.onmove=function ... | Dのmoveイベントに対するイベントハンドラ |
D.ondrag=function ... | Dのdragイベントに対するイベントハンドラ |
D.ondown=function ... | Dのdownイベントに対するイベントハンドラ |
D.bgColor(color) | Dの背景色をcolorにする |
D.show() | Dを見せる |
D.clip(x1,y1,x2,y2) | (x1,y1)と(x2,y2)の矩形範囲にクリップ |
D.hide() | Dを隠す |
D.moveTo(x,y) | Dの表示位置を(x,y)に移動する |
D.moveBy(x,y) | Dの表示位置を相対的に(x,y)移動する |
D.forced(t) | Dが別のDragableオブジェクトtの周辺境界線上にある時にtの内部あるいは外部に強制移動する |
D.inside(x,y) | 座標(x,y)がDの中か(true)外か(false) |
D.dragability | Dのドラッグを許可(true)または禁止(false) |
D.visibility | Dを見せているか(show)隠しているか(hidden) |
D.width, D.height | Dの幅と高さ |
droppedX, droppedY | ドロップ時のマウスカーソル位置 |
dstartX, dstartY | ドラッグ開始時のマウスカーソル位置 |
その他 | ドラッグ操作したオブジェクトを最も上のレイヤにする |
ライブラリは、ここを右クリックし dragable.js の名前で保存してください。