Question

I have page with few draggable(1,2) and few dropable(A,B). How can I specify that user can drop only into dropable “A” from draggable 1?
P.S, One of dropable is actualy sortable.

Answer 1

I think you can use the parameter accept: to achieve this.

Exemple:

$('.CssClassToDrag').draggable({ 
        containment: "#divDragAndDropArea", 
        scroll: false, 
        revert: "invalid" 
  });
$('.CssClassToDrop').droppable({
        accept: ".CssClassToDrag",
        hoverClass: "ui-state-active",
        activeClass: "ui-state-hover",
        drop: function (event, ui) {
            ...
        },

        out: function (event, ui) {
            ...
        }
    });

The draggable items with the CssClassToDrag will only can dropped into the droppable elements.