blog.longkey1.net

仕事でドラック＆ドロップを実装しなくちゃいけなくFlashかJavascriptで迷ってます。
一先ずJavascriptでどこまで出来るか検証中なのですが、これを気にある程度Javascriptが読めるようになりたいなと思ってます。

で、本当にJavascript初心者なので、ここにメモを残しておこうかなと。
久しぶりに泣きそうになりながら、一行一行解析してます。

参考サイト:
Drag & Drop - script.aculo.us 版

非常に綺麗なソースなのですが、まったくもってわけがわかりませんでした。
ま、解説無いですからね。

var correct = { opt0: "ans1", opt1: "ans2", opt2: "ans0" } //正解のデータを配列で用意
var mark = function(event) {
var points = 0;
var max = 0;
for (key in correct) {
    var answer = <a href="http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html#DollarFunction">$(key)</a>.<a href="http://javascriptist.net/ref/element.parentnode.html">parentNode</a>.id;
    points += (correct[key] == answer) ? 1: 0; //if文の省略形。
    ++max;
}
var score = Math.floor(points / max * 100); //パーセントの計算
var judge = (score >= 70) ? "合格": "不合格"; //70点以上で合格不合格
    $("result").<a href="http://javascriptist.net/ref_prototype/element.update.html">update</a>(judge + "：" + score + "%");
}

// ドラッグ終了時のエフェクト処理（貼り付け処理だと思う）
var posfix = function(draggable) {
    draggable.<a href="http://javascriptist.net/ref_prototype/element.setstyle.html">setStyle</a>({ left: "0px", top: "0px" });
}

// Droppables.addのオプションを設定（オーバーライト）
var optDropzone = {
    hoverclass: "dragenter", //hoverした時のCSSクラス名
    onDrop: function(draggable, dropzone) {
        if (dropzone.<a href="http://javascriptist.net/ref/element.childnodes.html">childNodes</a>.length == 0) { //子のエレメントが空なら
            dropzone.<a href="http://javascriptist.net/ref/element.appendchild.html">appendChild</a>(draggable); //子のエレメントに追加
        }
    }
}

// Draggableのオプションを設定（オーバーライト）
var optDraggable = {
    revert: true, //元の位置に戻る
    reverteffect: function() { /* NOP */ },
    starteffect: function(draggable) {
        draggable.<a href="http://jsgt.org/js/books/dhtml2/part3/cross/setopacity.htm">setOpacity</a>(0.5);
    },
    endeffect: function(draggable) {
        draggable.setOpacity(1.0);
        posfix(draggable);
    }
}

// ページロード時に、それぞれにセットしているメイン処理
window.onload = function() {
    <a href="http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html#Dollar_Dollar_Function">$$(".dropzone")</a>.<a href="http://javascriptist.net/ref_prototype/enumerable.each.html">each</a>(
        function(dropzone) {
            Droppables.add(dropzone.<a href="http://javascriptist.net/ref_prototype/Element.cleanWhitespace.html">cleanWhitespace</a>(), optDropzone);        }
    );
    $$(".draggable").each(
        function(draggable) {
            new Draggable(draggable, optDraggable);
        }
    );
    $("submit").<a href="http://javascriptist.net/ref_prototype/form.element.observer.html">observe</a>("click", mark);
}

先長いなあ・・・。