うーん・・・

jQueryでのドラッグアンドドロップについて

解決済

質問者：いちげんさん
質問日時：2022/07/30 09:10
回答数：1件

2つの画像をドロップして決まった枠にドロップするように以下コードを作成しました。
更に以下のように動作するようにしたいです
①ドロップされた時に画像はそのままで表面に〇等の画像を表示させるようにしたい
②２つとも決まった枠にドロップされた後に正解等のポップアップを表示させたい

上記要件を満たすようにするにはどのようにすればいいのでしょうか。

＜コード＞＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>

<!jQueryの定義>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"> …
</head>

<body>
<div class="draggable1"><img src="画像"></div>
<div class="draggable2"><img src="画像"></div>
<div class="droppable1"></div>
<div class="droppable2"></div>
<div class="correct"><img src="〇をつけたい"></div>
</body>
<style>
.draggable1 {
width: 60px;
height: 60px;
top: 200px;
right: 550px;
z-index: 100;
position: absolute;
text-align: center;
}

.droppable1 {
background-color: white;
width: 60px;
height: 60px;
padding: 0.5em;
margin: 10px;
border: solid 5px black;
position: absolute;
top: 200px;
left: 550px;
z-index: 1;
}
.draggable2 {
width: 60px;
height: 60px;
top: 400px;
right: 550px;
z-index: 100;
position: absolute;
text-align: center;
}

.droppable2 {
background-color: white;
width: 60px;
height: 60px;
padding: 0.5em;
margin: 10px;
border: solid 5px black;
position: absolute;
top: 400px;
left: 550px;
z-index: 1;
}
</style>
<script>
$(function () {
$(".draggable1").draggable({
snap: "droppable1",
snapMode: "inner",
revert: "invalid",
opacity: 0.7,
cursor: "move"
});
$(".droppable1").droppable({
accept: '.draggable1',
drop: function (e, ui) {
$(this)
.find("p");
var $srcObj = $(ui.draggable[0]);
$srcObj.offset($(this).offset());
return false;

}
});
}); $(function () {
$(".draggable2").draggable({
snap: "droppable2",
snapMode: "inner",
revert: "invalid",
opacity: 0.7,
cursor: "move"
});
$(".droppable2").droppable({
accept: '.draggable2',
drop: function (e, ui) {
$(this)
.find("p");
var $srcObj = $(ui.draggable[0]);
$srcObj.offset($(this).offset());
return false;

}
});
});
</script>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

通報する

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

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2022/07/30 16:56

こんにちは

最終形をどうなさりたいのか不明なのと、ご提示のソースも冗長で矛盾も含んでいるみたいなので、判断しにくいのですが・・

ひとまず、単純化しても良いものと勝手に解釈して、
　・ソースの重複を省く
　・ドロップ後の位置がセンターになるようにする
　　（現状は左上合わせ？←意図的なのか不明なので中央合わせに変えました）
　・丸の図形がどのようなサイズでどこに表示したいのか不明なので、
　　div.droppableに丸型のボーダーを表示することで代えています。
　　（図形表示にしたければ、そのように変更してください）
　・「ポップアップ」の意味がよくわからないので、alert表示にしてあります。
（ご提示のソースではドロップ後もドラッグ可能なようになっているので、そのままにしてありますが、それによって何度もalert表示が出てしまう可能性があるので、flagで制御しています。
要素そのものを移動してしまえば、位置合わせの計算等も不要になります。）

※ HTML、CSS、Scriptとも、できる範囲で元を残すようにしてはありますが、全体にいろいろ変えています。
以下、ご参考までに。

<!DOCTYPE html>
<html lang="ja">
<head><title>Sample</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.draggable {
width: 60px;
height: 60px;
top: 200px;
right: 550px;
z-index: 100;
position: absolute;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.droppable {
width: 60px;
height: 60px;
padding: 0.5em;
margin: 10px;
border: solid 5px black;
position: absolute;
top: 200px;
left: 550px;
}
.draggable + .draggable { top: 400px; }
.droppable + .droppable { top: 400px; }
.draggable.dropOver {
border:3px solid red;
border-radius: 50%;
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"> …
<script>
$(() => {
let flag;
const dropFunc = function(e, ui) {
e.preventDefault();
const p = $(this), po = p.offset(), t = ui.draggable;
t.addClass('dropOver').offset({
top: po.top + (p.outerHeight() - t.outerHeight()) / 2,
left: po.left + (p.outerWidth() - t.outerWidth()) / 2
});
if( $('.dropOver').length >= 2 && !flag) {
flag = true; setTimeout( () => alert('二つ正解!'), 10);
}
};

$('.draggable').draggable({
revert: 'invalid',
opacity: 0.7,
cursor: 'move'
});

$('.droppable').each((i, e) => {
$(e).droppable({
accept: $('.draggable').eq(i),
drop: dropFunc
});
});
});
</script>
</head>
<body>

<div class="draggable"><img src="./img/01.jpg"></div>
<div class="draggable"><img src="./img/02.jpg"></div>
<div class="droppable"></div>
<div class="droppable"></div>

</body>
</html>