Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

概要

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

デモ

http://jsdo.it/tsunet111/kcZ2H

コード

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({
        //この下2行の記述で、ドラッグしているものが前面に表示される
        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;
}
tsunet111
エレファンキューブというデジタル教材に特化した制作会社の代表。長らくFlash/ActionScripがメインでしたが、最近は、JavaScript、PHP、MYSQLなど必要に応じて使う。Facebookで「PhoneGap/Cordova 日本語グループ」運営中→ https://www.facebook.com/groups/phonegap.cordova.jp/
http://www.elephancube.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away