В любом случае, чтобы заблокировать определенные предметы, которые можно сбрасывать

Question

Например, если у меня есть object1, object2 а также object3Они могут быть сброшены только в Zone1

Тогда у меня есть object4, object5 а также object6Они могут быть сброшены только в Zone2

Как я мог настроить это?

Также я хотел бы object7 быть допущенным в любой Zone1 или же Zone2 но нет Zone3

На данный момент у меня настроено следующее.

$(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
        });
    });

но это значит что любой div с классом draggable может быть либо сброшен в droptarget или же droptargetGauges

Answer 1

Вы можете использовать group опция конфигурации, которая доступна для обоих DropTarget а также 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");
}

Демо здесь