jQuery检查是否已经“删除”了正确的元素

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

如果框1尝试进入droppable 2，它应该不起作用。

它几乎就像一个测验，需要匹配正确的答案（可拖动）和正确的答案（可放置）。

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

这是我到目前为止已经走了多远的一个例子…. manin网站都是用PHP完成的，所以我将使用PHP来生成“盒子”文本。

jQuery的

$(function () { $("#draggable,#draggable2").draggable(); $("#droppable").droppable({ drop: function (event, ui) { $(this) .find("p"), alert(); } }); }); 

HTML

 
 
Drag me to my target
 
 
 
2
 
 
 
Drop here
 
 
 
Drop here
  

Answer 1

您可以向draggabl和droppable html元素添加一些自定义属性，当您删除元素时，检查draggable和droppable上的值是否相同

 
 
Drag me to my target
 
 
 
Drop here
  

编辑：添加js（未测试）

 $(function () { $("#draggable,#draggable2").draggable(); $("#droppable").droppable({ drop: function (event, ui) { if($(this).attr("myValue") == ui.attr("myValue")) { alert("OK"); } } }); });