詳しい人求む！

JQuery UIを使用したドラッグ＆ドロップ：ドロップ先の制限について（再投稿

解決済

質問者：saitamamasai
質問日時：2017/07/21 10:32
回答数：1件

教えてください。
JQuery UIを使用してドラッグ＆ドロップを作成しているのですが、
以下の動作が再現できず困っております。
[内容]
ドラッグ元：アイテムAとアイテムB
ドロップ先：ボックス1とボックス2

・アイテムAとアイテムBはボックス1とボックス2のいずれにもドロップできる。
・ただし、ボックス1またはボックス2は１つしかアイテムをドロップできない
　※ボックス1にアイテムAがドロップされている場合、アイテムBをボックス1までドラッグしてもドロップができず、ボックス2にしかドロップできない。

イメージとしては、試験の穴埋め問題です。
一つの穴には一つの回答しか挿入できないようにしたいとお考えください。
現時点では、ボックス1にアイテムAがあってもアイテムBがその上に重なるようにドロップされてしまいます。

また、現在は簡易なパターンで作成していますが、ドラッグ元、ドロップ先が3つ、4つと増えた場合でも同様の制御を行いたいと考えています。

どうぞご教示ください。よろしくお願いいたします。

<script type="text/javascript">
$(function(){
//「.dragItem」をドラッグ
dragItem();
function dragItem(){
$('.dragItem').draggable({
revert:'invalid',
zIndex:'1000',
});
}

// 「.dropareaXX」にドロップされた時の処理
$('.droparea01,.droparea02').droppable({
accept: '.dragItem',
drop: function(ev, ui){
ui.draggable.prependTo(this).css({top:'0',left:'0'});
dragItem();
}
});

// 「#dragItemUI」にドロップ（元の場所に戻す）された時の処理
$('#dragItemUI').droppable({
accept: '.dragItem_drop',
});
dragItem();
});

</script>

</head>

<body>
<div id="dragItemUI">
<ul class="draglist">
<li class="dragItem dragItem_drop"><img src="img/dragitem_A.png"/></li>
<li class="dragItem dragItem_drop"><img src="img/dragitem_B.png"/></li>
</ul>
</div>

<div class="droparea01">ボックス1</div>
<div class="droparea02">ボックス2</div>

</body>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： yambejp
回答日時：2017/07/21 13:00

UL-LIのインタフェースがちょっとおかしそうなので

以下のようにしてみました

<style>
.droparea{
border:solid 1px #000000;
float:left;
width:30%;
height:200px;
}
.imgover{
background-Color:lime;
}
</style>
<script src="jquery.min.js"></script>
<script src="jquery-ui.js"></script>
<script>
function modDroparea(){
$('.droparea').each(function(){
var me=$(this);
me.droppable({
"disabled":me.find('.dragItem').length>0 && me.hasClass("dropone"),
});
});
}
$(function(){
$('.dragItem').draggable({
"revert":'invalid',
"zIndex":'1000',
});
modDroparea();
$('.droparea').droppable({
"hoverClass":'imgover',
"accept": '.dragItem',
"drop": function(e, ui){
ui.draggable.prependTo(this).css({top:'0',left:'0'});
modDroparea();
},
});
});
</script>
<div class="droparea">複数おける
<img class="dragItem" src="1.jpg"/></li>
<img class="dragItem" src="2.jpg"/></li>
</div>
<div class="droparea dropone">ひとつだけ</div>
<img class="dragItem" src="3.jpg"/></li>
<div class="droparea dropone">ひとつだけ
</div>