Draggables jQuery UI, disable a separate div on droppable

Question

I'm trying to create some kind of learning site, and one of the things I want students to do is drag and drop items into the area before moving on to the next step.

I was the way to do this, use the jquery droppables script and turn off the option to drag and drop elements when it drops into a div with the option to delete. Then I was going to add 1 to the variable, when it returns to the correct number, the button will be turned on.

The problem is that I cannot figure out how to make the droppable function work only for each specific draggable. So, I have a:

$(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>

, , div. javascript (im learning), , , , .

- ?

Answer 1

.

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

draggable #draggable, drop.

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

.

Answer 2

scope , droppable:

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

.