Jquery当一组项目位于其可放置的目标区域时检测

时间:2013-07-04 19:21:15

标签: jquery-ui jquery-ui-dialog jquery-ui-droppable adobe-edge jquery-draggable

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

1 个答案:

答案 0 :(得分:0)

我会这样做:每次丢弃一个元素,你都会在某个地方存储这个事件,然后检查是否所有元素都被删除了。 例如:

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

小心你多次分配var sym2的checkIfAllDropped函数。

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

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