Drag & Drop - Rico 版

<script type="text/javascript" src="/usr/lib/prototype/1.4.0/dist/prototype.js"></script>
<script type="text/javascript" src="/usr/lib/rico/1.1.2/rico.js"></script>

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

var byClassName = document.getElementsByClassName;  // ショートカット

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

var mark = function(event) {
    var points = 0;
    var max = 0;
    for (key in correct) {
        if (! key.match(/^opt[0-2]$/)) {
            continue;   // prototype.js 1.4.0 のオブジェクト汚染を回避
        }
        var answer = $(key).parentNode.id;
        points += (correct[key] == answer) ? 1: 0;
        ++max;
    }
    var score = Math.floor(points / max * 100);
    var judge = (score >= 70) ? '合格': '不合格';
    Element.update($('result'), judge + '：' + score + '%');
}

var Dropzone = Class.create();

Dropzone.prototype = (new Rico.Dropzone()).extend({
    activate: function() { /* NOP */ },
    deactivate: function() { /* NOP */ },
    showHover: function() {
        Element.addClassName(this.htmlElement, 'dragenter');
    },
    hideHover: function() {
        Element.removeClassName(this.htmlElement, 'dragenter');
    },
    canAccept: function() {
        return byClassName('draggable', this.htmlElement).length == 0;
    }
});

var Draggable = Class.create();

Draggable.prototype = (new Rico.Draggable()).extend({
    select: function() { /* NOP */ },
    startDrag: function() {
        var draggable = this.htmlElement;
        new Rico.Effect.FadeTo(draggable, 0.5, 0, 1);   // opacity
        Element.setStyle(draggable, { 'z-index': 1 });
    },
    cancelDrag: function() {
        var draggable = this.htmlElement;
        new Rico.Effect.FadeTo(draggable, 1.0, 0, 1);
        Element.setStyle(draggable, { 'z-index': 0 });
    },
    endDrag: function() {
        var draggable = this.htmlElement;
        new Rico.Effect.FadeTo(draggable, 1.0, 0, 1);
        Element.setStyle(draggable, { 'z-index': 0 });
    }
});

window.onload = function() {
    byClassName('dropzone').each(function(dropzone) {
        dndMgr.registerDropZone(new Dropzone(dropzone));
    });
    byClassName('draggable').each(function(draggable) {
        dndMgr.registerDraggable(new Draggable('', draggable));
    });
    Event.observe($('submit'), 'click', mark, false);
    Element.setStyle($('wait'), { display: 'none' });
}

//-----------------------------------------------------------------------------
// 座標計算ロジックの差し替え（for Safari & Opera & IE）

RicoUtil.toViewportPosition = function(element) {
    var offset = Position.cumulativeOffset(element);
    offset[0] -= RicoUtil.docScrollLeft();
    offset[1] -= RicoUtil.docScrollTop();
    return { x:offset[0], y:offset[1] };
}

RicoUtil.toDocumentPosition = function(element) {
    var offset = Position.cumulativeOffset(element);
    return { x:offset[0], y:offset[1] };
}

dndMgr.setStartDragFromElement = function(e, mouseDownElement) {
    this.origPos = RicoUtil.toDocumentPosition(mouseDownElement);
    this.startx = e.clientX - this.origPos.x;
    this.starty = e.clientY - this.origPos.y;
    this.interestedInMotionEvents = this.hasSelection();
    this._terminateEvent(e);
}

dndMgr._updateDraggableLocation = function(e) {
    var draggable = this.dragElement;
    draggable.style.left = (e.clientX - this.startx) + 'px';
    draggable.style.top  = (e.clientY - this.starty) + 'px';
}

dndMgr._leftOffset = function(e) {
    return 0;
}

dndMgr._topOffset = function(e) {
    return 0;
}

//-----------------------------------------------------------------------------

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