JavaScript Framework を使用して作成した、ドラッグ＆ドロップのサンプルをまとめます。
サンプルは、クイズや試験の類を想定したもので、
ドラッグ＆ドロップによる解答機能、および採点機能を実装しています。
サンプルの最終更新日
| *1 |
： |
2007年12月、更新を見送りました（Framework の仕様が、作成するサンプルのニーズに合わないため）。
|
動作確認結果
| Framework |
Firefox 2 |
Safari 3 |
Opera 9 |
IE 7 |
| Dojo |
0.4.1 |
OK |
OK |
NG *3 |
OK |
| Ext JS |
2.0 |
OK |
OK |
OK *4 |
OK |
| jQuery |
1.2.1 |
OK |
OK |
OK |
OK |
| mootools |
1.11 |
OK |
OK *1 |
OK |
OK *1 |
| Rico |
1.1.2 |
OK |
OK *2 |
OK *2 |
OK *2 |
| script.aculo.us |
1.8.0 |
OK |
OK |
OK |
OK |
| Yahoo! UI |
2.4.1 |
OK |
OK |
OK |
OK |
| HTML4 |
|
OK |
OK |
OK |
OK |
| HTML5 *5 |
|
NG |
NG |
NG |
NG |
| *1 |
： |
ドラッグ要素をドロップしたときに表示位置が微妙にずれます。
|
| *2 |
： |
Rico の座標計算ロジックをサンプル側で修正して無理やり動かしています。
|
| *3 |
： |
1回めのドラッグのときだけ、ドラッグ要素がマウスカーソルから離れた場所に表示されます。
その後はきちんと動くようになります。
|
| *4 |
： |
極端にパフォーマンスが落ちることがあります。
|
| *5 |
： |
Firefox 3.5, Chrome 4 で動作します。
|
モジュールのサイズ
Drag & Drop のサンプルでは、Framework を構成しているモジュールの中から、
必要なものだけを選択して使用しています（選択可能であれば）。
そうした場合の、モジュールの合計サイズをまとめました。
| Framework |
選択 *1 |
モジュール名 |
サイズ *2 |
| Dojo |
0.4.1 |
|
dojo.js |
146.5 KB |
| Ext JS |
2.0 |
Build |
ext.js |
151.9 KB |
| jQuery |
1.2.1 |
Load |
jquery-1.2.1.min.js, ui.draggable.js, ..... |
79.5 KB |
| mootools |
1.11 |
Build |
mootools-release-1.11.js |
22.5 KB |
| Rico |
1.1.2 |
|
prototype.js, rico.js |
134.3 KB |
| script.aculo.us |
1.8.0 |
Load |
prototype.js, scriptaculous.js, ..... |
192.7 KB |
| Yahoo! UI |
2.4.1 |
Load |
yahoo-min.js, dragdrop-min.js, ..... |
58.0 KB |
| HTML4 |
|
|
（IE では dxbl.js が必要） |
0.0 KB |
| HTML5 |
|
|
（HTML5 対応ブラウザが必要） |
0.0 KB |
| *1 |
： |
Build = Framework の入手時に、必要なモジュールを指定してビルドします。
Load = ページの読み込み時に、必要なモジュールだけを読み込みます。
|
| *2 |
： |
Framework によって、モジュールの圧縮方式や選択方式が異なるので、単純に比較することは出来ません。
|
更新履歴
| 日付 |
内容 |
| 2008-09-19 |
情報 |
記事のタイトルを、「Drag & Drop (Ajax JavaScript)」から「Drag & Drop」へ戻した。
|
| 2007-12-22 |
追加 |
モジュールのサイズ を追加した。
|
| 2006-05-24 |
初版 |
|
