Two draggables and two droppables on a single page

I have two set of draggabl开发者_Go百科e and two sets of dropable elements.

What I want is the first set of draggable elements to be droppable only inside the first set of droppables. The second set of draggables should be droppable only to inside the second set of droppables.

A code snippet:

// this can be dropped only inside .drop elements
$('.drag').draggable({ revert: true });
$('.drop').droppable({
    drop: function() {
        //          
   }
});

// this can be dropped only inside .drop2 elements
$('.drag2').draggable({ revert: true });
$('.drop2').droppable({
    drop: function() {
        //          
   }
});

So a user won't be able to drop element with .drag class to .drop2 container.

This is what you want.

Use Accept property of droppable widget and revert property of draggable widget to achieve this.