Javascript jquerydraggable"；游戏“；问题

所以我有一个类似于“游戏”的功能，更多的是一个测验，但我无法思考如何让它工作。 HTML

这里的文本

这就是jQuery

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

$（函数（）{
$（“.box”）.draggable（）；
$（“#一，#可拖放”）。可拖放({
drop：函数（事件、用户界面）{
$（本）
警报（“测试！”）；
}
});
});

正如您所看到的，它将对所有正在拖放到

#one

或

#dropable

上的内容发出警报

现在，问题来了。我有不同的框和不同的值（1到7）

每个

.draggable

区域都有一个ID（1到7个，总共7个

.draggable

区域）

---

如何检查是否已将正确的框拖动到正确的

.draggable

区域，然后检查是否已拖动所有框（提交）。

使用

接受：

说明符：

---

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

您可以从

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

}))

您不能使

可拖动，而是必须使用类似

或

Draggable1
可拖动的2
可拖动的3
拖拉
拖拉的
拖拉
拖拉
可降落区

---

以下是您的验证标准是什么？你认为什么样的元素是有效的？pl.explain所以我想做一些类似于刚刚被丢弃的东西的

if（$（this）.val（）==1）{alert（“Dropped！”）}

，

$（this）

。因此，从该元素获取值并检查它==1如果我没有错，那么draggable元素应该返回到它的原始位置，如果它是！=1 right？？是的，它应该恢复。似乎不起作用，如果我在可拖动元素上执行

.val（）

，我得到“”…@TidusJar，如果添加了无效的可拖动，则恢复

。核对答案
$(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);
       }
  });

<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>