Demo
問題．次の表をドラッグ＆ドロップにより完成させてください。
| オリンピック |
開催国 |
2004年（夏季）
アテネ |
|
2006年（冬季）
トリノ |
|
2008年（夏季）
ペキン |
|
|
|
ソースコード
ここでは JavaScript のみ掲載します。
CSS と HTML については「Drag & Drop - 共通ソース（CSS, HTML）」
全ソースコード
を参照してください。
以下の「mootools の読み込み」では mootools-release-1.11.js を読み込んでいますが、これは必要とするコンポーネントだけをビルドしたものです。
ビルド方法については、次のセクション mootools のビルド方法 を参照してください。
mootools の読み込み
<!--
<script type="text/javascript" src="/usr/lib/mootools/1.2b1/mootools-beta-1.2b1.js"></script>
-->
<script type="text/javascript" src="/usr/lib/mootools/1.11/mootools-release-1.11.js"></script>
|
JavaScript
<script type="text/javascript">
//<![CDATA[
(function() {
var correct = { opt0: 'ans1', opt1: 'ans2', opt2: 'ans0' } // 正解
var mark = function(event) {
var points = 0;
var max = 0;
for (key in correct) {
var answer = $(key).getParent().id;
points += (correct[key] == answer) ? 1: 0;
++max;
}
var score = Math.floor(points / max * 100);
var judge = (score >= 70) ? '合格': '不合格';
$('result').setHTML(judge + '：' + score + '%');
}
var newpos = function(drag) {
var pos = drag.getParent().getPosition();
drag.setStyles({ left: pos.x, top: pos.y });
return drag;
}
var optDropzone = {
over: function() {
this.addClass('dragenter');
},
leave: function() {
this.removeClass('dragenter');
},
drop: function(drag) {
this.removeClass('dragenter');
if (this.getChildren().length == 0) {
drag.injectInside(this);
}
}
}
var optDraggable = {
droppables: $$('.dropzone'),
onStart: function(drag) {
drag.setStyles({ opacity: 0.5, zIndex: 1 });
},
onComplete: function(drag) {
newpos(drag).setStyles({ opacity: 1.0, zIndex: 0 });
}
}
window.addEvent('domready', function() {
$$('.dropzone').addEvents(optDropzone);
$$('.draggable').each(function(drag) {
new Drag.Move(newpos(drag), optDraggable);
});
$('submit').addEvent('click', mark);
$('wait').setStyle('display', 'none');
});
}());
//]]>
</script>
|
mootools のビルド方法
mootools をビルドするには、
Download release 1.11
において、必要とするコンポーネントを指定します。
操作箇所を ハイライト で示します。
3カ所にチェックを入れていますが、これらが依存する他のコンポーネントには自動的にチェックが入ります。
▶ Choose the Components you need
☑ Core
☐ .....
☑ Element.Selectors
☐ .....
☑ Window.DomReady
☐ .....
☑ Drag.Move
☐ .....
▶ Choose compression type
◎ JavaScript Packer
○ YUI Compressor
○ JsMin Compression
○ No Documentation
○ No Compression
[ DOWNLOAD ]
以上で、mootools-release-1.11.js のダウンロードが始まります。
