开发者

Jquery disable droppable but keep draggable enabled

As an activity for students, I have a set of draggables that need to be matched to a set of droppables. The code below all works fine (for example it allows a student to change a selection) but it also allows a student to put two draggables on one droppable.

    $('.drags').draggable({containment:'#container',
                          revert:function (event, ui) {   
                           $(this).data("dr开发者_JS百科aggable").originalPosition 
                                   = {top: 0,left: 0 }; return !event;}});

    $('.drops').droppable({accept:'.drags',
                           drop:function(event, ui){  
                                  ui.draggable.position( { of: $(this), 
                                                           my: 'left top', 
                                                           at: 'left top'} );},});

If I disable droppable, by including the following code in the 'drop' function

    $(this).droppable({ disabled: true }); 

then the draggable is also disabled which I do not want.

is there any way of limiting the droppable to accepting only one draggable, but still keep the drag enabled?

Thanks

SOLUTION:

I got a solution in the end, which basically involves destroying the droppable when a draggable is dropped into it, and making the element droppable again when the draggable dropped on it is moved. Below is the code, a bit terse but it may help if someone is looking for a solution.

Cheers

      $('.drags').draggable({
            containment:'#container',
            revert:function (event, ui) {
                  $(this).data("draggable").originalPosition = {top: 0,left: 0 }; 
                           return !event;},
            start:function(event, ui){ var thisId = this.id; 
                                var dropId = null; 
                                var a = $('#container').data('state');
                                $.each(a,function(key,value){
                                     if(value==thisId){dropId = key; 
                                            a[key]='x'; 
                                            dropId = '#'+dropId;
                                            $(dropId).droppable({
                                              accept:'.c1yx',
                                              drop:function(event, ui){ 
                                               var droppedId = ui.draggable.attr('id');
                                               ui.draggable.position( { of: $(this), my: 'left top', at: 'left top'} );
                                               var thisId = this.id; 
                                               var a = $('#c1yw').data('state');
                                                $.each(a,function(key,value){if(key==thisId){a[key] =droppedId}}); 
                                                $(this).droppable( 'destroy')}});}})}});

//set the state for each of the droppables

$('#c1yw').data('state'{c1y9:'x',c1yc:'x',c1yf:'x',c1yi:'x',c1yl:'x',c1yo:'x',c1yr:'x',c1yu:'x'});

$('#c1y9,#c1yc,#c1yf,#c1yi,#c1yl,#c1yo,#c1yr,#c1yu').droppable({
    accept: '.drags',
    drop: function (event, ui) {
        var droppedId = ui.draggable.attr('id');
        ui.draggable.position({
            of: $(this),
            my: 'left top',
            at: 'left top'
        });
        var thisId = this.id;
        var a = $('#c1yw').data('state');
        $.each(a, function (key, value) {
            if (key == thisId) {
                a[key] = droppedId
            }
        });
        $(this).droppable('destroy')
    } });
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜