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

您可以使用适用于DropTarget和DropTargetArea的{{3}}配置选项：

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");
}

group

无论如何要阻止某些可丢弃的物体

1 个答案: