jQuery可拖动“游戏”问题答案

【问题标题】：jQuery draggable "game" questionsjQuery可拖动“游戏”问题
【发布时间】：2014-03-27 19:59:43
【问题描述】：

所以我有一个类似“游戏”的功能，更像是一个测验，但我无法弄清楚如何让它工作。 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 区域，然后检查所有框是否已被拖动（通过提交）。

【问题讨论】：

您的验证标准是什么？您将如何将可拖动元素视为有效放置？ pl。解释
所以我想做一些像if($(this).val() == 1){alert("Dropped!")}、$(this) 这样的东西刚刚被丢弃。因此，从该元素中获取值并检查它是否 == 1
如果我没记错的话，如果它的 != 1 对，那么可拖动元素应该回到原来的位置？？
是的，它应该恢复。

标签： javascript php jquery html jquery-ui

【解决方案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

【讨论】：

似乎不起作用，如果我在可拖动元素上执行.val()，我会得到 "" ...
@TidusJar, revert back if invalid draggable 添加。检查答案

【解决方案2】：

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

您可以使用 onDrop 事件设置标志以确定是否所有所需的对象都已在最后被丢弃。

【讨论】：