I have a some draggables in a list of droppables (1 draggable per droppable li).

When I move a draggable from one droppable to another free droppable, I want to diable the receiving droppable, and enable the droppable it is leaving from.

In firebug the droppable class gets removed – but the functionality of the droppable remains. I have a feeling I need to use live() somehow, but could use a leg-up.

$(function() {
$(".user").draggable({
  revert          : true, 
  revertDuration  : 200
});


  $("li.droppable").droppable({
    accept      : ".user",
    hoverClass  : "drophover",
    drop: function(event, ui) {
      var position  = this.getAttribute("id").replace("position_", ""),
        user_id = ui.draggable.attr("id").replace("user_", "");
        droppable = this
        parent    = ui.draggable.parent()
      $.ajax({
        url   : "users/"+user_id+"",
        type  : "POST",
        dataType: "JSON",
        data  : ({
          "position"  : position,
          "_method"   : "PUT"
        }),
        success : function() {
          $(ui.draggable).parent().addClass("droppable");
          $(ui.draggable).appendTo(droppable);
          $(parent).removeClass("droppable");
        }
      });
    }
  });
});

I have a some draggables in a list of droppables (1 draggable per droppable li).

When I move a draggable from one droppable to another free droppable, I want to diable the receiving droppable, and enable the droppable it is leaving from.

In firebug the droppable class gets removed – but the functionality of the droppable remains. I have a feeling I need to use live() somehow, but could use a leg-up.

$(function() {
$(".user").draggable({
  revert          : true, 
  revertDuration  : 200
});


  $("li.droppable").droppable({
    accept      : ".user",
    hoverClass  : "drophover",
    drop: function(event, ui) {
      var position  = this.getAttribute("id").replace("position_", ""),
        user_id = ui.draggable.attr("id").replace("user_", "");
        droppable = this
        parent    = ui.draggable.parent()
      $.ajax({
        url   : "users/"+user_id+"",
        type  : "POST",
        dataType: "JSON",
        data  : ({
          "position"  : position,
          "_method"   : "PUT"
        }),
        success : function() {
          $(ui.draggable).parent().addClass("droppable");
          $(ui.draggable).appendTo(droppable);
          $(parent).removeClass("droppable");
        }
      });
    }
  });
});

• javascript
• jquery

2 Answers 2

Instead of removing the droppable class, you can enable/disable droppables by setting the 'disabled' option.

    success : function() {
      $(ui.draggable).parent().droppable( "option", "disabled", false );
      $(ui.draggable).appendTo(droppable);
      $(parent).droppable( "option", "disabled", true );
    }

http://docs.jquery./UI/Droppable#option-disabled

Instead of altering the class, perhaps try to set the option? $(ui.draggable).parent().droppable();

and

$(ui.draggable).parent().droppable('option', 'disabled', true);