jQuery检查正确的元素是否被“删除”

Question

因此，我有10个不同的“可拖动”框和2个“可拖放”区域，5个框将放入droppable 1，然后其他5个将放入可丢弃区域2.

如果方框1试图进入droppable 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和投掷的HTML元素，当你放下的元素，你检查的价值在可拖动和可拖拽上是一样的

<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"); 
      } 
    } 
    }); 
    });