Draggables Jquery UI, disable individual div on droppable

Question

I'm trying to make some educational site and one of the things I want to have the students do is drag items to an area before being able to proceed to the next stage.

I was thing the way to do this was use the jquery droppables script and have the items draggable option disable when it is dropped in the droppable div. Then I was going to add 1 to a variable, when it gets to the right number the button to advance would be enabled.

The problem is that I can't figure out how to make the droppable function work only for each particular draggable. So what I have is:

$(document).ready(function() {
    $("#draggable").draggable();
    $("#draggable2").draggable();
    $("#droppable").droppable({
      drop: function() { $( "#draggable" ).draggable( "option", "disabled", true );; }
    });
  });

With these divs;

<div id="droppable">Drop here</div>
<div id="draggable" class="drag">Drag me</div>
<div id="draggable2" class="drag">Drag me</div>

But of course, all this does is disable the the first draggable whenever any are dragged into the droppable div. My javascript is not very good (im learning) and I don't know how I would make it only disable the one that I put into the droppable area.

Can anyone help please?

Answer 1

You're just putting the right code in the wrong place.

$( "#draggable" ).draggable( "option", "disabled", true )

The above will work on it's own and turn off draggable for #draggable, no need to put it in the drop function.

OR:

$("#droppable").droppable({
  disabled: true
});

Either will work.

Answer 2

This can be achieved by defining a scope to both draggables and droppable area:

$(function() {
    $('.drag').draggable({
        revert: "invalid",
        scope: "items"
    });
    $('#droppable').droppable({
        scope: "items"
    });
});

Example Link.