如何禁用即使拖放到错误的droppable中的可拖动对象 [英] how to disable a draggable even if dropped into wrong droppable

问题描述

我知道如何在将对象拖动到正确的可放置对象时禁用可拖动对象，如下图所示，但在将其拖放到错误的可放置对象对象时不知道如何禁用可拖动对象. 我希望用户即使答案不正确也无法再次拖动，这意味着只能尝试一次. 我使用边缘动画，该边缘动画使用的语法与普通JavaScript相比使用不同的语法来获取元素，但其余部分相同. 以下是我的带有注释的代码.

I know how to disable draggable when the object is dragged into the correct droppable as you can see below but not when dropped into the wrong droppable. I want the user to not be able to drag again even if the answer is incorrect, which means only one try. I use edge animate which uses a different syntax to get the elements than plain JavaScript but the rest is the same. Below is my code with comments.

for(j=0;j<35;j++){
    sym.$(answers1[j]).addClass('drag'+j);
    sym.$('.drag'+j).draggable({
    //revert: "invalid"   // I do not want revert in any case
    stop: function(){
        $(this).draggable('disabled');  // will disable when dropped anywhere
        //I want only when into the wrong droppable - 
        //so almost good but not quite right.
    }           
});

sym.$(droppables[j]).droppable({
    accept: ".drag"+j,
    drop: function(event,ui){
    ui.draggable.draggable( 'destroy' );  // the correct answer is disabled
    //I could have used 'disabled' here since it does the same as 'destroy'.
    } 
});

推荐答案

这是在Edge Animate中完成的最终正确方法. Edge Animate中使用data()的方式与普通javascript和html略有不同.我们使用它是为了能够将数据值与变量ID的值进行比较.我们还为可​​拖动对象使用了一个类，并在UI中为没有可放置对象(分散器)的可拖动对象添加了该类，因此仍可以将其拖动并放置在可放置对象中，并充当所有其他可拖动对象.然后，我们在dropEvent函数中添加了条件.

Here is the final and correct way it was done in Edge Animate. The way to using data() in Edge Animate is a little different than plain javascript and html. We used it in order to be able to compare the data value with the value of the variable ID. We also used one class for the draggables and added the class in the UI for the draggables that did not have a droppable (distractors) so they could still be dragged and placed in a droppable and act as all the other draggables. Then we added the conditional in the dropEvent function.

//'level1-D','level1-E','level1-F'  added the drag class in the UI for distractors.
var answers1 = [
'level1-A','level1-B','level1-C',
'level2-A','level2-B','level2-C',
'level3-A','level3-B','level3-C',
'level4-A','level4-B',
'level5-A','level5-B','level5-C',
'level6-A','level6-B','level6-C',
'level7-A','level7-B','level7-C','level7-D',
'level8-A','level8-B','level8-C','level8-D','level8-E',
'level9-A','level9-B','level9-C',
'level10-A','level10-B','level10-C',
];

var droppables = [
'dp0' ,'dp1' ,'dp2' ,'dp3' ,'dp4' ,'dp5' ,'dp8','dp6','dp7','dp9',
'dp10','dp13','dp11','dp12','dp15','dp16','dp14','dp19','dp17','dp20',
'dp18','dp23','dp22','dp21','dp25','dp24','dp27','dp26','dp28','dp29','dp30','dp31'
];

for(j=0;j<32;j++){
    // draggables
    sym.$(answers1[j]).addClass('drag');
    // droppables
    sym.$(droppables[j]).droppable({
    accept:'.drag',
    drop: dropEvent
    }).data('answer', answers1[j]);  // use data to be able to compare gives the same name as the draggables

}// end for loop
sym.$('.drag').draggable({
        revert : "invalid"      
});

k=0;
function dropEvent(event, ui){
    ui.draggable.draggable('option', 'revert' , false );
    ui.draggable.draggable('option','disabled', true ); 
    ui.draggable.position( { of: $(this), my: 'center', at: 'middle' } );
    ID = ui.draggable.attr("id").replace('Stage_','');
   if(ID == $(this).data('answer')){  // retrieve the data info and compare to ID 
       k++;
        sym.getSymbol("meter").play();
        sym.getSymbol("coinAnimation").play(0); 
        sym.$(ID + '-result').css({'opacity':1.0});
        sym.$("boxScore").html(k);
        sym.$("score").html(k+'/32');
        if (music.paused ) {
            correct.pause();    
        } else {
            correct.currentTime = 0;
            correct.play();
        }
    }// end if
}

这篇关于如何禁用即使拖放到错误的droppable中的可拖动对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！