Demo
問題．次の表をドラッグ＆ドロップにより完成させてください。
| オリンピック |
開催国 |
2004年（夏季）
アテネ |
|
2006年（冬季）
トリノ |
|
2008年（夏季）
ペキン |
|
|
|
ソースコード
ここでは JavaScript のみ掲載します。
CSS と HTML については「Drag & Drop - 共通ソース（CSS, HTML）」
全ソースコード
を参照してください。
jQuery の読み込み
<script type="text/javascript" src="/usr/lib/jquery/1.2.1/jquery-1.2.1.min.js"></script>
<!--
<script type="text/javascript" src="/usr/lib/jquery/jquery.ui/1.0/ui.mouse.js"></script>
<script type="text/javascript" src="/usr/lib/jquery/jquery.ui/1.0/ui.draggable.js"></script>
<script type="text/javascript" src="/usr/lib/jquery/jquery.ui/1.0/ui.draggable.ext.js"></script>
<script type="text/javascript" src="/usr/lib/jquery/jquery.ui/1.0/ui.droppable.js"></script>
<script type="text/javascript" src="/usr/lib/jquery/jquery.ui/1.0/ui.droppable.ext.js"></script>
-->
<script type="text/javascript" src="/usr/lib/jquery/trunk/plugins/dimensions/jquery.dimensions.js"></script>
<script type="text/javascript" src="/usr/lib/jquery/trunk/ui/current/ui.mouse.js"></script>
<script type="text/javascript" src="/usr/lib/jquery/trunk/ui/current/ui.draggable.js"></script>
<script type="text/javascript" src="/usr/lib/jquery/trunk/ui/current/ui.draggable.ext.js"></script>
<script type="text/javascript" src="/usr/lib/jquery/trunk/ui/current/ui.droppable.js"></script>
<script type="text/javascript" src="/usr/lib/jquery/trunk/ui/current/ui.droppable.ext.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).parent().attr('id');
points += (correct[key] == answer) ? 1: 0;
++max;
}
var score = Math.floor(points / max * 100);
var judge = (score >= 70) ? '合格': '不合格';
$('#result').html(judge + '：' + score + '%');
}
var optDropzone = {
tolerance: 'pointer',
hoverClass: 'dragenter',
accept: '.draggable',
drop: function(e, ui) {
if ($(this).children().length == 0) {
$(this).append($(ui.draggable.element));
}
}
}
var optDraggable = {
opacity: 0.5,
stop: function(e, ui) {
$(ui.draggable.element).css({
position: 'static', left: 0, top: 0
});
}
}
$(function() {
$('.dropzone').droppable(optDropzone);
$('.draggable').draggable(optDraggable);
$('#submit').click(mark);
$('#wait').css({ display: 'none' });
});
}());
//]]>
</script>
|
更新履歴
| 日付 |
内容 |
| 2007-12-27 |
変更 |
jQuery をバージョンアップ（1.1.1 → 1.2.1）。
Drag & Drop モジュールを Interface から jQuery UI へ変更。
|
| 追加 |
2007-02-16版（jQuery 1.1.1 + Interface 1.2）の、
全ソースコード
ページを追加。
|
| 2007-02-16 |
変更 |
冗長な部分を詰めた。
［修正前］ $(…).each(function(i){ $(this).Droppable(…); });
［修正後］ $(…).Droppable(…);
|
| 2007-02-11 |
初版 |
|
