Question

所以我举了10个不同的“可拖动”盒子和2个“可放置”区域，5个盒子将进入droppable 1，然后另外5个盒子将进入droppable 2。

如果方框1试图进入可放置2，它应该不起作用。

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

我正在努力找到一种方法来实现它，我可以将元素拖动并能够将它们拖动到任何框中但是如何验证它是否是正确的？我可以在元素上加上某种价值吗？

这是我到目前为止有多远的例子.... 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");
             }
     }
  });
  });

jQuery检查是否有正确的元素＆＃34;删除＆＃34;

1 个答案: