Drag & Drop - Yahoo! UI (YUI) 版

<script type="text/javascript" src="/usr/lib/yui/2.4.1/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="/usr/lib/yui/2.4.1/event/event-min.js"></script>
<script type="text/javascript" src="/usr/lib/yui/2.4.1/dom/dom-min.js"></script>
<script type="text/javascript" src="/usr/lib/yui/2.4.1/selector/selector-beta-min.js"></script>
<script type="text/javascript" src="/usr/lib/yui/2.4.1/dragdrop/dragdrop-min.js"></script>

<script type="text/javascript">
//<![CDATA[
(function() {

var Y = YAHOO.util;     // ショートカット

var correct = { opt0: 'ans1', opt1: 'ans2', opt2: 'ans0' }  // 正解

var mark = function(event) {
    var points = 0;
    var max = 0;
    for (key in correct) {
        var answer = Y.Dom.get(key).parentNode.id;
        points += (correct[key] == answer) ? 1: 0;
        ++max;
    }
    var score = Math.floor(points / max * 100);
    var judge = (score >= 70) ? '合格': '不合格';
    Y.Dom.get('result').innerHTML = judge + '：' + score + '%';
}

var Draggable = function(id, sGroup, config) {
    this.init(id, sGroup, config);
}

YAHOO.extend(Draggable, Y.DD, {
    startDrag: function(x, y) {
        var drag = this.getEl();
        Y.Dom.setStyle(drag, 'opacity', 0.5);
        Y.Dom.setStyle(drag, 'z-index', 1);
    },
    endDrag: function(e) {
        var drag = this.getEl();
        Y.Dom.setStyle(drag, 'opacity', 1.0);
        Y.Dom.setStyle(drag, 'z-index', 0);
        Y.Dom.setStyle(drag, 'left', '0px');
        Y.Dom.setStyle(drag, 'top',  '0px');
    },
    onDragEnter: function(e, id) {
        Y.Dom.addClass(id, 'dragenter');
    },
    onDragOut: function(e, id) {
        Y.Dom.removeClass(id, 'dragenter');
    },
    onDragDrop: function(e, id) {
        var drop = Y.Dom.get(id);
        Y.Dom.removeClass(drop, 'dragenter');
        if (Y.Selector.query('.draggable', drop).length == 0) {
            var drag = this.getEl();
            Y.Dom.setStyle(drag, 'left', '0px');
            Y.Dom.setStyle(drag, 'top',  '0px');
            drop.appendChild(drag);
        }
    }
});

Y.Event.onDOMReady(function() { 
    var nodes;
    var idx;
    nodes = Y.Selector.query('.dropzone');
    for (idx in nodes) {
        new Y.DDTarget(nodes[idx]);
    }
    nodes = Y.Selector.query('.draggable');
    for (idx in nodes) {
        new Draggable(nodes[idx]).isTarget = false;
    }
    Y.Event.addListener('submit', 'click', mark);
    Y.Dom.setStyle('wait', 'display', 'none');
});

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