jQuery UI の draggable とdropppable でドラッグ吸着

概要

jQuery UI の draggable とdropppable でドラッグ＆ドロップ式のクイズのようなものをつくろうとしたら、意外と手間がかかったのでメモ。
ひとまず、判定ロジックなどは入っていません。

デモ

コード

HTML

<div class="container">
    <div id="drop1" class="drop"></div>
    <div id="drop2" class="drop"></div>
    <div id="drop3" class="drop"></div>
    <div id="drag1" class="drag">A</div>
    <div id="drag2" class="drag">B</div>
    <div id="drag3" class="drag">C</div>
</div>

JavaScript

var defaultPosiArr,nowDragObj;
$(document).ready(function(){
    //初期位置記録
    defaultPosiArr = new Array();
    for(var cnt=1;cnt<=3;cnt++){
        defaultPosiArr[cnt] = $('#drag'+cnt).position();
    }

    //ドラッグオブジェクト設定
    $('.drag').draggable({
        //この下２行の記述で、ドラッグしているものが前面に表示される
        stack:'.drag',
        zIndex:10,
        start:function(){
            //今ドラッグしているオブジェクトを格納しておく
            nowDragObj = $(this);
        },
        revert: function(event, ui){
            var num = Number($(this).attr('id').split('drag').join(''));

            //ドロップターゲットに吸着しない場合は初期位置に戻す
            $(this).data('ui-draggable').originalPosition = {
                top: defaultPosiArr[num].top,
                left: defaultPosiArr[num].left
            };

            return !event;
        }
    });

    //ドロップオブジェクト設定
    $('.drop').droppable({
        drop: function( event, ui ) {
            //ドロップされたら吸着する
            var dropposi = $(this).position();
            nowDragObj.css('top',(dropposi.top)+'px');
            nowDragObj.css('left',(dropposi.left)+'px');
        }
    });
});

※ 他に、jQuery と jQuery UI を読み込んでいます。

CSS

.drag{
    background:#CC0000;
    width:50px;
    height:50px;
    position:absolute;
    left:50px;
    cursor:pointer;
}

#drag1{
    top:50px;
}
#drag2{
    top:110px;
}
#drag3{
    top:170px;
}

.drop{
    background:#CCCCCC;
    width:50px;
    height:50px;
    position:absolute;
    left:120px;
}

#drop1{
    top:50px;
}
#drop2{
    top:110px;
}
#drop3{
    top:170px;
}