jquery - 拖放 - 检查项目是否放置在正确的位置

Question

我正在自学 javascript/jquery，并决定作为一个副项目来创建一个拖放游戏。我根据我发现的其他教程进行了修改，因此请轻松编写代码 - 希望它不会太可怕。

我正在使用 jquery ui dropable 库来实现游戏，目前我会在元素掉落后检查它是否位于正确的位置，如果是，我会将分数增加 1。

然而，我遇到的问题是，当元素掉落在错误的地方时，我无法让分数下降一分。

如果将一个方 block 放置在正确的占位符上，则得分会增加 1，但如果同一个方 block 从正确的占位符上移除，则得分需要减 1。

这是我到目前为止所做的演示 http://creativelabel.co.uk/drag-and-drop/

有什么想法吗？

Answer 1

解决此问题的一种方法是在删除的元素中存储它是否放置在有效的方 block 中。这意味着当它被移动到无效的方 block 时，您可以检查它以前是否在有效的方 block 中，如果是这种情况，则将分数减一。

希望这是清楚的!

参见http://jsfiddle.net/pET3y/现场演示

相关代码:

  if ( slotNumber == imgNumber ) {
    ui.draggable.addClass( 'img-match' );
    ui.draggable.data("valid", true);

    imgMatch++;
  }  else {
      if(ui.draggable.data("valid")) {
         imgMatch--;
         ui.draggable.data("valid", false); 
      }
  }

注意: fiddle 有一个警报 alert(ui.draggable.data("valid")); 用于调试

--

更改为拖动时分数会下降

您现在要做的是监听drag事件(称为activate)，并在调用该事件时运行一个函数。该函数检查被拖动的元素之前是否处于正确的位置，如果是，则将其标记为不在正确的位置并降低分数。

参见:http://jsfiddle.net/3NkwJ/1/

      drop: handleDropEvent,
      activate: handleDragEvent //add new event
} );

并添加以下内容:

  function handleDragEvent( event, ui ) {
    if(ui.draggable.data("valid")) {
             imgMatch--;
             $('input[name=Score]').val(imgMatch);
             $('#score h1').text(imgMatch);
             ui.draggable.data("valid", false); 
    }      
  }