JqueryUI 检测一组项目何时位于其可放置目标区域

Question

我有 4 个拖放项目，它们都拖放到它们的目标上，但随后应该触发“welldone”事件并且该部分无法正常工作。我得到了一些帮助，但无法正常工作，我做错了什么？

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

请在再次发布之前调试您的代码！