Drag & Drop - script.aculo.us 版

<script type="text/javascript" src="/usr/lib/scriptaculous/1.8.0/lib/prototype.js"></script>
<script type="text/javascript" src="/usr/lib/scriptaculous/1.8.0/src/scriptaculous.js?load=effects,dragdrop"></script>

<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).parentNode.id;
        points += (correct[key] == answer) ? 1: 0;
        ++max;
    }
    var score = Math.floor(points / max * 100);
    var judge = (score >= 70) ? '合格': '不合格';
    $('result').update(judge + '：' + score + '%');
}

var optDropzone = {
    hoverclass: 'dragenter',
    onDrop: function(drag, drop) {
        drag.parentNode.setStyle({ zIndex: 0 });
        drag.setStyle({ left: 0, top: 0 });
        if (drop.select('.draggable').length == 0) {
            drop.appendChild(drag);
        }
    }
}

var optDraggable = {
    starteffect: function(drag) {
        drag.parentNode.setStyle({ zIndex: 1 });
        drag.setStyle({ opacity: 0.5 });
    },
    endeffect: function(drag) {
        drag.parentNode.setStyle({ zIndex: 0 });
        drag.setStyle({ opacity: 1.0 })
            .setStyle({ left: 0, top: 0 });
    }
}

document.observe('dom:loaded', function() {
    $$('.dropzone').each(function(drop) {
        Droppables.add(drop, optDropzone);
    });
    $$('.draggable').each(function(drag) {
        new Draggable(drag, optDraggable);
    });
    $('submit').observe('click', mark);
    $('wait').setStyle({ display: 'none' });
});

}());
//]]>
</script>