Drag & Drop - HTML5 版

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

var $ = function(id){return document.getElementById(id)};

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').innerHTML = judge + '：' + score + '%';
}

// ドラッグ開始
var doDragStart = function(event) {
    event.dataTransfer.setData('text', event.currentTarget.id);
}

// ドロップゾーンに入った
var doDragEnter = function(event) {
    event.currentTarget.setAttribute('class','dropzone dragenter')
}

// ドロップゾーンに滞在中
var doDragOver = function(event) {
    if (event.currentTarget.getElementsByClassName('draggable').length === 0) {
        event.preventDefault();  // ドロップを許可
    }
}

// ドロップゾーンから出た
var doDragLeave = function(event) {
    event.currentTarget.setAttribute('class','dropzone');
}

// ドロップされたときの処理
var doDrop = function(event) {
    event.currentTarget.appendChild($(event.dataTransfer.getData('text')));
}

// NodeList(HTMLCollection) を Array に変換
nl2a = function(nl){
    var a = [];
    for (var i = 0; i < nl.length; ++i) { a.push(nl[i]); }
    return a;
}

// 初期化
window.addEventListener('load', function(event) {
    // ドロップゾーン
    nl2a(document.getElementsByClassName('dropzone'))
         .filter(function(elm){return elm.nodeName === 'DIV'})
         .forEach(function(elm){
             elm.addEventListener('dragenter', doDragEnter, false);
             elm.addEventListener('dragover',  doDragOver,  false);
             elm.addEventListener('dragleave', doDragLeave, false);
             elm.addEventListener('drop',      doDrop,      false);
         });

    // ドラッグ要素
    nl2a(document.getElementsByClassName('draggable'))
         .filter(function(elm){return elm.nodeName === 'DIV'})
         .forEach(function(elm){
            elm.getElementsByTagName('img')[0].setAttribute('draggable', 'false');
            elm.setAttribute('draggable', 'true');
            elm.addEventListener('dragstart', doDragStart, false);
         });

    $('submit').addEventListener('click', mark, false);
    $('wait').style.display = 'none';
}, false);

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