0

我正在尝试使用主要在 Jquery 和 Javascript 上运行的 Adob​​e Edge Animate 创建拖放交互。

一切都可以按照我的意愿进行拖动和放置，但是，我需要代码来识别和计算正确的元素何时被放置在正确的目标上，当所有 15 个元素都被正确放置时我想要播放一条消息（其中一个按钮将是可见）。

将其分解： 计算 element_1 何时放置在 target_1 上，当元素 1-15 已正确放置时，sym.play('ButtonLabel - 这将使按钮可见)。

我目前使用的代码如下： 

yepnope({nope:['jquery-ui.min.js'], complete: init});

function init(){
    //Drag
    sym.$('Designed').draggable({ 
    opacity: 0.5,
    revert: 'invalid',
});

sym.$('Interactive').draggable({ 
    opacity: 0.5,
    revert: 'invalid',
});

sym.$('Evaluated').draggable({ 
    opacity: 0.5,
    revert: 'invalid',
});

sym.$('Raised').draggable({ 
    opacity: 0.5,
    revert: 'invalid',
});

sym.$('Clear').draggable({ 
    opacity: 0.5,
    revert: 'invalid',
});

sym.$('Created').draggable({ 
    opacity: 0.5,
    revert: 'invalid',
});

sym.$('Fundraising').draggable({ 
    opacity: 0.5,
    revert: 'invalid',
});

sym.$('Communicated').draggable({ 
    opacity: 0.5,
    revert: 'invalid',
});

sym.$('LongLasting').draggable({ 
    opacity: 0.5,
    revert: 'invalid',
});

sym.$('Saved').draggable({ 
    opacity: 0.5,
    revert: 'invalid',
});

sym.$('Increased').draggable({ 
    opacity: 0.5,
    revert: 'invalid',
});

sym.$('Organisations').draggable({ 
    opacity: 0.5,
    revert: 'invalid',
});

sym.$('Organised').draggable({ 
    opacity: 0.5,
    revert: 'invalid',
});

sym.$('Achieving').draggable({ 
    opacity: 0.5,
    revert: 'invalid',
});

sym.$('IncreasedConfidence').draggable({ 
    opacity: 0.5,
    revert: 'invalid',
});

//Drop
sym.$('DesignedTarget').droppable({
    accept: sym.$('Designed'),  
    drop: function() {
        sym.getSymbol("Designed").play();
}
});

sym.$('EvaluatedTarget').droppable({
    accept: sym.$('Evaluated'), 
            drop: function() {
                sym.getSymbol("Evaluated").play();
            }
});

sym.$('CreatedTarget').droppable({
   accept: sym.$('Created'),    
    drop: function() {
        sym.getSymbol("Created").play();
}});

sym.$('CommunicatedTarget').droppable({
   accept: sym.$('Communicated'),   
    drop: function() {
        sym.getSymbol("Communicated").play();
}});

sym.$('OrganisedTarget').droppable({
   accept: sym.$('Organised'),  
    drop: function() {
        sym.getSymbol("Organised").play();
}});

sym.$('InteractiveTarget').droppable({
   accept: sym.$('Interactive'),    
    drop: function() {
        sym.getSymbol("Interactive").play();
}});

sym.$('FundraisingTarget').droppable({
   accept: sym.$('Fundraising'),    
    drop: function() {
        sym.getSymbol("Fundraising").play();
}});

sym.$('OrganisationsTarget').droppable({
   accept: sym.$('Organisations'),  
    drop: function() {
        sym.getSymbol("Organisations").play();
}});

sym.$('LongLastingTarget').droppable({
   accept: sym.$('LongLasting'),    
    drop: function() {
        sym.getSymbol("LongLasting").play();
}});

sym.$('ClearTarget').droppable({
   accept: sym.$('Clear'),  
    drop: function() {
        sym.getSymbol("Clear").play();
}});

sym.$('RaisedTarget').droppable({
   accept: sym.$('Raised'), 
    drop: function() {
        sym.getSymbol("Raised").play();
}});

sym.$('SavedTarget').droppable({
   accept: sym.$('Saved'),  
    drop: function() {
        sym.getSymbol("Saved").play();
}});

sym.$('IncreasedTarget').droppable({
   accept: sym.$('Increased'),  
    drop: function() {
        sym.getSymbol("Increased").play();
}});

sym.$('AchievingTarget').droppable({
   accept: sym.$('Achieving'),  
    drop: function() {
        sym.getSymbol("Achieving").play();
}});

sym.$('IncreasedConfidenceTarget').droppable({
   accept: sym.$('IncreasedConfidence'),    
    drop: function() {
        sym.getSymbol("IncreasedConfidence").play();
}});
4

1 回答 1

0

我会尝试使用一个变量，只要将一个项目放在 drop: 函数中，它就会进行迭代。一旦计数器达到 15，它就应该执行播放。

$counter = 0;
....
sym.$('SavedTarget').droppable({
   accept: sym.$('Saved'),  
    drop: function() {
        $counter += 1;
        sym.getSymbol("Saved").play();
}});
....
if($counter == 15) {
   sym.play('ButtonLabel');
}
于 2013-07-24T08:25:18.470 回答