JqueryUI檢測一組物品是否在其可投放目標區域

Question

我有4個拖放物品，他們都拖放到他們的目標上，但應該發射'幸福'事件，部分不工作。我有一些幫助，但可以讓這個工作，我做錯了什麼？

// insert code to be run when the symbol is created here 
yepnope({nope:['scripts/jquery-ui-1.10.3.custom.min.js','scripts/jquery.ui.touch-punch.min.js'], complete: init}) 

// Initial state: not dropped 
sym.setVariable("dropped", "false"); 

function init(){ 
//Use Jquery code for draggable and droppable 

//Drag it 
sym.$('scrambled_egg').draggable({opacity:.5, revert:'invalid'}); 

//Drop it on the target 
sym.$('scrambled_target').droppable({ 
    accept:sym.$("scrambled_egg"), 
    drop: function() { 
    sym.getSymbol("scrambled_egg").play(); 

// Store that you dropped it 
    sym.setVariable("dropped", "true"); 
    // Call a function to check if all the symbols are dropped 
    // and fire event "done" 
    checkIfAllDropped(); 
    } 
    } 
); 

//Snap back to default state 
sym.$('scrambled_default').droppable({ 
accept:sym.$("scrambled_target"), 
drop: function() { 
    // Back to not dropped state 
    sym.setVariable("dropped", "false"); 
} 
} 
); 

//End code chunk 



//Use Jquery code for draggable and droppable 
//Drag it 
sym.$('fried_egg').draggable({opacity:.5, revert:'invalid'}); 

//Drop it on the target 
sym.$('fried_target').droppable({ 
    accept:sym.$("fried_egg"), 
    drop: function() { 
    sym.getSymbol("fried_egg").play(); 

    // Store that you dropped it 
    sym.setVariable("dropped", "true"); 
    // Call a function to check if all the symbols are dropped 
    // and fire event "done" 
    checkIfAllDropped(); 
    } 
    } 
); 
//Snap back to default state 
sym.$('fried_default').droppable({ 
accept:sym.$("fried_target"), 
drop: function() { 
    // Back to not dropped state 
    sym.setVariable("dropped", "false"); 
} 
} 
); 
//End code chunk 

    //Use Jquery code for draggable and droppable 
//Drag it 
sym.$('poached_egg').draggable({opacity:.5, revert:'invalid'}); 

//Drop it on the target 
sym.$('poached_target').droppable({ 
    accept:sym.$("poached_egg"), 
    drop: function() { 
    sym.getSymbol("poached_egg").play(); 

    // Store that you dropped it 
    sym.setVariable("dropped", "true"); 
    // Call a function to check if all the symbols are dropped 
    // and fire event "done" 
    checkIfAllDropped(); 
    } 
    } 
); 
//Snap back to default state 
sym.$('poached_default').droppable({ 
accept:sym.$("poached_target"), 
drop: function() { 
    // Back to not dropped state 
    sym.setVariable("dropped", "false"); 
} 
} 
); 
//End code chunk 

//Use Jquery code for draggable and droppable 

//Drag it 
sym.$('boiled_egg').draggable({opacity:.5, revert:'invalid'}); 

//Drop it on the target 
sym.$('boiled_target').droppable({ 
    accept:sym.$("boiled_egg"), 
    drop: function() { 
    sym.getSymbol("boiled_egg").play(); 

    // Store that you dropped it 
    sym.setVariable("dropped", "true"); 
    // Call a function to check if all the symbols are dropped 
    // and fire event "done" 
    checkIfAllDropped(); 
    } 
    } 
); 

//Snap back to default state 
sym.$('boiled_default').droppable({ 
accept:sym.$("boiled_target"), 
drop: function() { 
    // Back to not dropped state 
    sym.setVariable("dropped", "false"); 
} 
} 
); 
//End code chunk 
} 

checkIfAllDropped = function(){ 
var stage = AdobeEdge.getComposition("How_do_you_eat_yours").getStage(); 
var sym1 = stage.getSymbol("scrambled_target"); 
var sym2 = stage.getSymbol("fried_target"); 
var sym2 = stage.getSymbol("boiled_target"); 
var sym2 = stage.getSymbol("poached_target"); 
if(sym1.getVariable("dropped") === "true" && 
    sym2.getVariable("dropped") === "true" && 
    sym3.getVariable("dropped") === "true" && 
    sym4.getVariable("dropped") === "true"){ 
    // Fire event done! 
    stage.play("welldone"); 
} 
}; 

Answer 1

我會做這樣的：每次你刪除一個元素你的地方存儲這個事件，你檢查是否所有的元素都將被丟棄的時間。 例如：

// Initial state: not dropped 
sym.setVariable("dropped", "false"); 

sym.$('scrambled_target').droppable({ 
    accept:sym.$("scrambled_egg"), 
    drop: function() { 
     sym.getSymbol("scrambled_egg").play(); 

     // Store that you dropped it 
     sym.setVariable("dropped", "true"); 
     // Call a function to check if all the symbols are dropped 
     // and fire event "done" 
     checkIfAllDropped(); 
    } 
    } 
); 

sym.$('scrambled_default').droppable({ 
    accept:sym.$("scrambled_egg"), 
    drop: function() { 
     // Back to not dropped state 
     // EDIT HERE! Dind't get that sym was your stage. 
     // AND EDIT EVERYWHERE ELSE. 
     sym.getSymbol("scrambled_egg").setVariable("dropped", "false"); 
    } 
    } 
); 

的checkIfAllDropped（）函數將是這個樣子：

checkIfAllDropped = function(){ 
    var stage = AdobeEdge.getComposition("COMPOSITION_CLASS_NAME").getStage(); 
    var sym1 = stage.getSymbol("sym1"); 
    var sym2 = stage.getSymbol("sym2"); 
    if(sym1.getVariable("dropped") === "true" && 
     sym2.getVariable("dropped") === "true"){ 
     // Fire event done! 
     stage.play("done"); 
    } 
}; 

一定要小心checkIfAllDropped功能要分配VAR SYM2多次。

checkIfAllDropped = function(){ 
var stage = AdobeEdge.getComposition("How_do_you_eat_yours").getStage(); 
var sym1 = stage.getSymbol("scrambled_target"); 
// Here... 
var sym2 = stage.getSymbol("fried_target"); 
// Here... 
var sym2 = stage.getSymbol("boiled_target"); 
// Here... 
var sym2 = stage.getSymbol("poached_target"); 
if(sym1.getVariable("dropped") === "true" && 
    sym2.getVariable("dropped") === "true" && 
    sym3.getVariable("dropped") === "true" && 
    sym4.getVariable("dropped") === "true"){ 
    // Fire event done! 
    stage.play("welldone"); 
} 
}; 

請再次發佈之前調試您的代碼！