Jquery disable droppable but keep draggable enabled -


as activity students, have set of draggables need matched set of droppables. code below works fine (for example allows student change selection) allows student put 2 draggables on 1 droppable.

    $('.drags').draggable({containment:'#container',                           revert:function (event, ui) {                               $(this).data("draggable").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 disable droppable, including following code in 'drop' function

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

then draggable disabled not want.

is there way of limiting droppable accepting 1 draggable, still keep drag enabled?

thanks

solution:

i got solution in end, involves destroying droppable when draggable dropped it, , making element droppable again when draggable dropped on moved. below code, bit terse may if looking 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 = $('#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 = $('#c1yw').data('state');                                                 $.each(a,function(key,value){if(key==thisid){a[key] =droppedid}});                                                  $(this).droppable( 'destroy')}});}})}}); 

//set state each of 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 = $('#c1yw').data('state');         $.each(a, function (key, value) {             if (key == thisid) {                 a[key] = droppedid             }         });         $(this).droppable('destroy')     } }); 


Comments

Popular posts from this blog

linux - Using a Cron Job to check if my mod_wsgi / apache server is running and restart -

actionscript 3 - TweenLite does not work with object -

jQuery Ajax Render Fragments OR Whole Page -