javascript - jQuery 可拖动 "game"问题

Question

所以我有一个类似“游戏”的功能，更多的是测验，但我不知道如何让它发挥作用。 HTML

<td id='1to7 value' class="boxes" value="1to7"> Text here </td>

这就是 jQuery

<script>
  $(function () {
      $(".boxes").draggable();
      $("#one,#droppable").droppable({
          drop: function (event, ui) {
              $( this )
              alert("testing!");
            }
      });
  });
</script>

如您所见，它会对 #one 或 #droppable 上丢弃的所有内容发出警报。

现在问题来了。我有不同的框，具有不同的值(1 到 7)。

每个.draggable区域都有一个ID(1到7，总共7个.draggable区域)。

如何检查正确的框是否已拖动到正确的 .draggable 区域，然后在所有框都被拖动后(通过提交)进行检查。

Answer 1

您可以从 ui.drabbable 获取可拖动对象并检查其 val()用于测试。

$(function () {
  $(".boxes").draggable(
      {revert: 'invalid',
       stop: function(){
        $(this).draggable('option','revert','invalid');
      }
     }
  );

  $("#droppable").droppable({
      drop: function (event, ui) {
        var draggable = ui.draggable;
        if(draggable.attr("value")==1)
            alert("correct!");
          else
            draggable.draggable('option','revert',true);
       }
  });

});

你不能创建<td>可拖动，相反，您必须使用类似 <span> 的内容或<div>

<span class="boxes" value="1"> Draggable1 </span>
<span class="boxes" value="2"> Draggable2 </span>
<span class="boxes" value="3"> Draggable3 </span>
<span class="boxes" value="4"> Draggable4 </span>
<span class="boxes" value="5"> Draggable5 </span>
<span class="boxes" value="6"> Draggable6 </span>
<span class="boxes" value="7"> Draggable7 </span>
<div id="droppable">
    droppable area
</div>

这里是fiddle