Выдержка из документации jQuery UI API для droppable :
drop (событие, пользовательский интерфейс)
- событие
- пользовательский интерфейс
- перетаскиваемый : объект jQuery, представляющий перетаскиваемый элемент.
- helper : jQuery объект, представляющий перетаскиваемый помощник.
- position : Текущее CSS положение перетаскиваемого помощника как объекта {top, left}.
- смещение : текущая позиция смещения перетаскиваемого помощника как {верхний, левый} объект.
Вы уже знали, что this теперь можно сбросить, теперь у вас есть доступ к draggable. То, что jQuery называет helper, является элементом, следующим за курсором. По умолчанию это одно и то же, но вы можете оставить перетаскиваемый объект на месте, пока вы не уроните его, пока призрачный клон следует за вашим курсором.
Пока вы можете дать класс перетаскиваемому объекту, а затем проверить его в событие сброса с чем-то вроде этого ...
const categories = ["paris", "ny", "london", "barcelona"];
$(function() {
$("#answers div").draggable();
$("#box div").droppable({
drop: function(event, ui) {
const $this = $(this);
if (categories.some(c => $this.hasClass(c) && ui.draggable.hasClass(c))) {
$this
.addClass("ui-state-highlight")
.find("p")
.html("Valid :)");
} else {
$this
.addClass("ui-state-highlight")
.find("p")
.html("Invalid :(");
}
}
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUIZ</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<h1>QUIZ</h1>
<div id="answers">
<div class="barcelona">
<p> Antoni Gaudi </p>
</div>
<div class="paris">
<p> Champ Elysees </p>
</div>
<div class="london">
<p> Tate Modern </p>
</div>
<div class="ny">
<p> Fifth Avenue </p>
</div>
</div>
<div id="box">
<div class="paris">
<p> PARIS </p>
</div>
<div class="ny">
<p> NY </p>
</div>
<div class="london">
<p> LONDON </p>
</div>
<div class="barcelona">
<p> BARCELONA </p>
</div>
</div>
</body>
</html>
Однако я бы предложил подумать надолго. В конце концов, я думаю, вы захотите хранить пазлы в JavaScript.
[
{ category: "Paris", answers: ["Champ Elysees", "Montmartre"] },
{ category: "NY", answers: ["Big Apple", "Broadway"] }
]
Тогда вы сможете автоматически создать HTML для пазлов и сохранять виджеты draggable и droppable в каждом категория. Примерно так:
categories.forEach(c => {
c.droppable = createDroppable(c.category);
c.draggables = c.answers.map(answer => createDraggable(answer));
});
Затем вы можете сравнить перетаскиваемый объект с помощью идентификатора, не полагаясь на атрибуты. Я не очень знаком с jQuery, но я считаю, что это можно сделать с помощью метода is.
// in the drop event
const category = categories.find(c => $(this).is(c.droppable));
if (category.draggables.some(answer => ui.draggable.is(answer)) {
// this answer is valid!
}