2001.3.9-

ドラッグ&ドロップライブラリ: dragable.js (HTML5対応)

1. 概要

 ドラッグ&ドロップは、今日では代表的なユーザインタフェースですが、WebAPIに十分満足できる形で実装されているわけではありません。そこで、ドラッグ&ドロップのライブラリを作ってみました。動作の確認はInternetExplorer11, Chrome44.0, Edge, iPad safariで行いました。

2. サンプル

 本ライブラリはかつてNetscape社が公開していたDrag and Drop Conponentを拡張する形で開発しました。以下はそこにあったサンプルプログラムをベースにしたものです。

dragme.html:

<!DOCTYPE html> <html lang="ja"><head> <meta charset="utf-8"> <title>sample</title> </head><body> <script src=dragable.js></script> <script> D1=new Obj(80,80,"<H1>Drag me.</H1>"); D1.dragable(); D1.ondrop=function(){D2.show(); D1.hide();} D2=new Obj(20,20,"<H1>What happened!</H1>"); D2.dragable(); D2.ondrop=function(){D1.show(); D2.hide();} D2.hide() </script> </body></html>

 また、以下は「じゃんけん」のプログラムです。

janken.html:

<!DOCTYPE html> <html lang="ja"><head> <meta charset="utf-8"> <title>じゃんけん</title> </head><body> <script src=dragable.js></script> <script> G=new Obj(180,120,"<img src=img/g.gif>"); G.dragable(); G.ondrop=function(){ //グーを if(C.inside(droppedX,droppedY)) C.hide(); //チョキにドロップ if(P.inside(droppedX,droppedY)) G.hide(); //パーにドロップ } C=new Obj( 20,220,"<img src=img/c.gif>"); C.dragable(); C.ondrop=function(){ //チョキを if(G.inside(droppedX,droppedY)) C.hide(); //グーにドロップ if(P.inside(droppedX,droppedY)) P.hide(); //パーにドロップ } P=new Obj( 60, 60,"<img src=img/p.gif>"); P.dragable(); P.ondrop=function(){ //パーを if(G.inside(droppedX,droppedY)) G.hide(); //グーにドロップ if(C.inside(droppedX,droppedY)) P.hide(); //チョキにドロップ } </script> </body></html>

 どちらも、このページ中に表示されていますので、お試しください。

3. ドラッグ&ドロップ・ライブラリ:dragable.js

 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 の名前で保存してください。

3. 使用例


koyama88@cameo.plala.or.jp