Edited at

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;
}