拖放 - 檢查項目被扔在正確的地方

Question

我在教自己的javascript/jquery，並決定作爲一個副項目來創建拖放遊戲。我已經將它建立在我找到的其他教程上，並且只是適應了它，所以在代碼上輕鬆一下 - 希望它不太可怕。

我正在使用jquery ui dropable庫來實現遊戲，目前我檢查一次該項目是否被放棄，如果它是在正確的地方，如果它是我增加了一個分數。

但是我遇到的問題是，當物品放在錯誤的地方時，我無法將分數降低一分。

如果一個正方形放在正確的佔位符上，它會給分數加1，但如果同一個正方形從正確的佔位符中移除，那麼它需要取得1分。

繼承人這裏是我到目前爲止 http://creativelabel.co.uk/drag-and-drop/

做任何想法演示？

Answer 1

解決這個問題的一種方法是在被丟棄的元素中存儲它是否被放置在有效的正方形中。這意味着當它移動到一個無效的正方形時，你可以檢查它是否以前是有效的，如果是這種情況，則將得分減1。

希望這是明確的！

更改爲 - 的小提琴有警報alert(ui.draggable.data("valid"));調試

：

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

注：

了現場演示

相關代碼見http://jsfiddle.net/pET3y/拖動比分下降

你現在正在做的是聽拖動事件（稱爲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); 
    }  
    } 

Answer 2

我只脫脂的代碼，但此塊之後

if (slotNumber == imgNumber) { 
    ui.draggable.addClass('img-match'); 
    imgMatch++; 
} 

可你只需要添加一個else語句

else 
    imgMatch--;