Question

所以我有一个＆＃34;游戏＆＃34;像功能，更多的测验，但我无法理解如何让它工作。 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个和.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

Answer 2

使用accept:说明符：http://www.jeasyui.com/documentation/droppable.php

您可以使用onDrop事件设置标志，以确定最后是否已删除所有所需对象。

jQuery可拖动的“游戏”问题

2 个答案: