Drag & Drop - Dojo 版

<script type="text/javascript">
    djConfig = { isDebug: false }
</script>
<script type="text/javascript" src="/usr/lib/dojo/0.4.1/dojo.js"></script>

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

dojo.require('dojo.dnd.HtmlDragMove');

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

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

var posfix = function(draggable) {
    dojo.html.setStyle(draggable, 'left', '0px');
    dojo.html.setStyle(draggable, 'top',  '0px');
}

dojo.declare('Dropzone', dojo.dnd.HtmlDropTarget, {
    _super_: dojo.dnd.HtmlDropTarget.prototype,
    placeIndicator: function() { /* NOP */ },
    onDragOver: function(e) {
        dojo.html.addClass(this.domNode, 'dragenter');
        return this._super_.onDragOver.apply(this, arguments);
    },
    onDragOut: function (e) {
        dojo.html.removeClass(this.domNode, 'dragenter');
        return this._super_.onDragOut.apply(this, arguments);
    },
    onDrop: function(e) {
        if (dojo.html.getElementsByClass('draggable', this.domNode).length) {
            return;     // Dropを拒否
        }
        posfix(e.dragObject.domNode);
        return this._super_.onDrop.apply(this, arguments);
    }
});

dojo.declare('Draggable', dojo.dnd.HtmlDragMoveSource, {
    _super_: dojo.dnd.HtmlDragMoveSource.prototype,
    onDragStart: function(e) {
        dojo.html.setOpacity(this.domNode, 0.5);
        dojo.html.setStyle(this.domNode, 'z-index', 1);
        return this._super_.onDragStart.apply(this, arguments);
    },
    onDragEnd: function(e) {
        dojo.html.setOpacity(this.domNode, 1.0);
        dojo.html.setStyle(this.domNode, 'z-index', 0);
        posfix(this.domNode);
        return this._super_.onDragEnd.apply(this, arguments);
    }
});

dojo.event.connect(dojo, 'loaded', function() {
    var arrDropzone = dojo.html.getElementsByClass('dropzone');
    dojo.lang.forEach(arrDropzone, function(dropzone) {
        new Dropzone(dropzone, ['choices']);
    });
    var arrDraggable = dojo.html.getElementsByClass('draggable');
    dojo.lang.forEach(arrDraggable, function(draggable) {
        new Draggable(draggable, 'choices');
    });
    dojo.event.connect(dojo.byId('submit'), 'onclick', mark);
    dojo.html.setStyle('wait', 'display', 'none');
});

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