javascript - jQuery 检查一个元素是否正确 "dropped"

Question

所以我有例如 10 个不同的“可拖动”框和 2 个“可放置”区域，5 个框将进入可放置 1，然后其他 5 个将进入可放置 2。

如果 box 1 试图进入 droppable 2 它不应该工作。

这几乎就像一个测验，需要将正确的框(可拖动)与正确的答案(可放置)相匹配。

我正在努力寻找一种方法来做到这一点，我可以让元素可拖动并能够将它们拖到任何框中，但我如何验证它是否正确？我可以为元素赋予某种值(value)吗？

这是我到目前为止所取得的进展的示例......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>

Answer 1

您可以向 draggabl 和 droppable html 元素添加一些自定义属性，并且当您放下该元素时，您检查 draggable 和 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");
             }
     }
  });
  });