Таким образом, у меня есть, например, 10 разных «перетаскиваемых» ящиков и 2 «droppable» области, 5 ящиков перейдут в droppable 1, а затем остальные 5 перейдут в droppable 2.
Если ящик 1 пытается перейти в droppable 2, он не должен работать.
Это почти как викторина, необходимо сопоставить правильные поля (draggable) с правильными ответами (droppable).
Я изо всех сил пытаюсь найти способ сделать это, я могу заставить элементы перетаскивать и уметь перетаскивать их в любую ячейку, но как я могу проверить, правильно ли это? Могу ли я добавить какую-то ценность для элемента?
Вот пример того, как далеко я дошел до сих пор. Веб-сайт manin сделан на PHP, поэтому я буду использовать PHP для генерации текста «ящиков».
JQuery
$(function () { $("#draggable,#draggable2").draggable(); $("#droppable").droppable({ drop: function (event, ui) { $(this) .find("p"), alert(); } }); }); HTML
<div id="draggable" class="ui-widget-content"> <p>Drag me to my target</p> </div> <div id="draggable2" class="ui-widget-content"> <p>2</p> </div> <div id="droppable" class="ui-widget-header"> <p>Drop here</p> </div> <div id="droppable" class="ui-widget-header"> <p>Drop here</p> </div>
Вы можете добавить некоторые настраиваемые атрибуты к элементам draggabl и droppable html, и когда вы удаляете элемент, вы проверяете, что значение на перетаскиваемом и на droppable одинаково
<div id="draggable" class="ui-widget-content" myValue="question1"> <p>Drag me to my target</p> </div> <div id="droppable" class="ui-widget-header" myValue="question1"> <p>Drop here</p> </div>
Изменить: добавлен js (не проверен)
$(function () { $("#draggable,#draggable2").draggable(); $("#droppable").droppable({ drop: function (event, ui) { if($(this).attr("myValue") == ui.attr("myValue")) { alert("OK"); } } }); });