Anyway to block certain droppable objects

Question

For example if I have object1, object2 and object3 These can only be dropped in Zone1

Then I have object4, object5 and object6 These can only be dropped in Zone2

How could I configure this?

Also I would like object7 to be allowed to drop in either Zone1 or Zone2 but not Zone3

At the moment I have the following configured.

$(document).ready(function () {
        $(".draggable").each(function (index, item)
        {
            $(item).kendoDraggable({
                filter: ".handle",
                hint: function () {
                    return $('#box').clone().css("display", "block");
                },
                dragstart: draggableOnDragStart,
                dragend: draggableOnDragEnd
            });
        });

        $("#droptarget").kendoDropTarget({
            drop: droptargetOnDrop
        });

        $("#droptargetGauges").kendoDropTargetArea({
            filter: ".test1, .test2",
            drop: droptargetOnDrop
        });
    });

but this means that any div with the class draggable can either be dropped in droptarget or droptargetGauges

Answer 1

You can use the group configuration option, which is available for both DropTarget and DropTargetArea:

HTML:

<div id='dragoptions'>
    <div class="draggable dragoption" id="person-one">person one</div>
    <div class="draggable dragoption" id="person-two">person two</div>
    <div class="draggable dragoption2" id="person-three">person three</div>
    <div class="draggable dragoption2" id="person-four">person four</div>
    <div class="draggable dragoption3" id="person-five">person five</div>
</div>
<div id="targets">
    <div class="droptarget type1" id="target1">role a</div>
    <div class="droptarget type1" id="target2">role b</div>
    <div class="droptarget type2" id="target3">role c</div>
</div>

JS:

$("#dragoptions").kendoDraggable({
    filter: ".dragoption",
    group: "roles",
    hint: function (element) {
        return $(element).clone();
    },
    dragstart: draggableOnDragStart,
    dragend: draggableOnDragEnd
});

$("#dragoptions").kendoDraggable({
    filter: ".dragoption2",
    group: "roles2",
    hint: function (element) {
        return $(element).clone();
    },
    dragstart: draggableOnDragStart,
    dragend: draggableOnDragEnd
});

$("#dragoptions").kendoDraggable({
    filter: ".dragoption3",
    group: "both",
    hint: function (element) {
        return $(element).clone();
    },
    dragstart: draggableOnDragStart,
    dragend: draggableOnDragEnd
}); 

$("#target1").kendoDropTarget({
    group: "roles",
    dragenter: droptargetOnDragEnter,
    dragleave: droptargetOnDragLeave,
    drop: onDrop
});

$("#target2").kendoDropTarget({
    group: "roles2",
    dragenter: droptargetOnDragEnter,
    dragleave: droptargetOnDragLeave,
    drop: onDrop
});

$("#targets").kendoDropTargetArea({
    group: "both",
    dragenter: droptargetOnDragEnter,
    dragleave: droptargetOnDragLeave,
    filter: "#target1, #target2",
    drop: onDrop
});

function draggableOnDragStart(e) {
    $(e.currentTarget).addClass("dragging");
}

function draggableOnDragEnd(e) {
    $(".draggable").removeClass("dragging");
}

function droptargetOnDragEnter(e) {
    $(e.dropTarget).addClass("drop");
}

function droptargetOnDragLeave(e) {
    $(".droptarget").removeClass("drop");
}

function onDrop(e) {
    $(".droptarget").removeClass("drop");
}

Demo here