このページは現在更新していません。「エフェクトライブラリ」のページに移行しましたのでそちらをご覧ください。

ドラッグ＆ドロップライブラリ: Dragable

2001.3.9-2004.6.19　小山智史(弘前大学)

1. 概要

　ドラッグ＆ドロップは、WindowsやMacintoshの標準的な操作に用いられている他、ヒューマンインタフェースが重視されるアプリケーションではしばしば用いられます。しかし、Webブラウザで利用可能なJavaScript言語にはオブジェクトのドラッグ機能やドラッグ＆ドロップに関するイベントハンドラの機能が無いため、そのようなプログラム(Webページ)の作成は困難でした。

　そこで、ドラッグ＆ドロップに関連する機能をライブラリとしてまとめ、容易にプログラムを作成できるようにしました。

　なお、本ライブラリはNetscape社が公開していたDrag and Drop Conponentを拡張する形で開発し、拡張箇所を明記してあります。

2. ドラッグ＆ドロップ・ライブラリ:dragable.js

　dragable.jsで利用できる機能とその使い方を下表にまとめました。NSはNetscapeNavigator、IEはInternetExplorerを表しています。

動作の確認はNetscapeNavigator4.5-4.78, 7.1, InternetExplorer5.0-6.0で行いました。

表1: dragable.jsの機能と使い方(*印は新規に機能追加した箇所)
プロパティまたはメソッド	NS	IE	機能
D=new Dragable(x, y, html)	○	○*	(x,y)の位置にDragableオブジェクトを生成する
D=new Dragable(layer)	○	×	既存のレイヤ(layer)を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	○*	○*	ドラッグ開始時のマウスカーソル位置
その他	○*	○*	ドラッグ操作したオブジェクトを最も上のレイヤにする

*印はオリジナルのライブラリに対し機能追加した箇所で、主な拡張点は次のとおりです。

オリジナルのライブラリではレイヤ機能を用いていたためNetscapeNavigatorでしか動作しなかったが、StyleSheetを用いてInternetExplorerでも利用できるようにしたこと
Dragableオブジェクトをランダムな位置に表示できるようにしたこと
Dragableオブジェクトの表示・非表示の制御と参照(show, hide, visibility)
ドラッグの許可・禁止の制御と参照(dragability)
ドラッグ開始時およびドロップ時の座標の保存(dstartX, dstartY, droppedX, droppedY)
別のDragableオブジェクトの境界域にドロップした際の強制移動(forced)
座標がDの中か外かの判断(inside)
ドラッグ操作したオブジェクトを最も上のレイヤにすること

　ライブラリを入手するには、下記でリストを表示し、dragable.js の名前で保存してください。

3. 使用例

じゃんけん(簡単なサンプル)(ソースはこちら)...「グー」「チョキ」「パー」が表示され、ドラッグ＆ドロップで重ね合わせると、負けた方が消えます。ゲーム性はありません。
バラバラ教材...マウス操作で絵がバラバラになります。画像ファイルはひとつでOK。アレンジによりさまざまな教材を作ることができます。
なにかな教材...マウス操作で隠れている絵が現れます。アレンジによりさまざまな教材を作ることができます。
アンパンマンのふくわらい(ソースはこちら)...このWeb教材は、渡邊真希(1999年3月弘前大学教育学部卒)が作成しました。
「もの」の類別学習(ソースはこちら)...このWeb教材は、渡邊真希(1999年3月弘前大学教育学部卒)が作成しました。
形の類別学習(ソースはこちら)...このWeb教材は、天内純一氏(深浦小学校)の発案により、渡邊真希(1999年3月弘前大学教育学部卒)が作成しました。
おかいもの...初期画面が表示されると、「さあ、お買い物にいこう。女の子をお店まで連れていってあげてね。」と声が出ます。そこで、ドラッグ＆ドロップ操作で女の子をどこかのお店に連れていくと、画面が変わり、例えば「やおや」の店内の画面となります。ここではドラッグ＆ドロップの操作で商品をカゴに入れ、お金をレジに移動します。買い物が終わると店を出て、初期画面に戻ります。ただし、買い物をするにつれ「かったもの」は増え、財布の中身は減ります。なお、店内の商品はたくさんある中から4品がランダムに表示されるようになっています。このWeb教材は、渡邊真希(1999年3月弘前大学教育学部卒)が作成しました。

4. おわりに

　インターネット環境やWebブラウザの普及と相まって、様々なWeb教材が作成され、利用されています。教材によっては、利用者に適したインタフェースを用意することにより、一層の効果を発揮することも少なくありません。本ライブラリがその一助となれば幸いです。

本ライブラリは弘前大学総合情報処理センター研究開発費の補助を得て開発しました。

MMIライブラリ