使用 Kendo 拖放创建多选元素

Question

我有一个我在这里尝试做的例子：http://jsbin.com/OwoYAlEQ/1/edit

这是我的 HTML：

<div class="draggable" id="person-one">person one</div>
<div class="draggable" id="person-two">person two</div>
<div class="draggable" id="person-three">person three</div>
<div class="draggable" id="person-four">person four</div>

<div class="droptarget" id="role-a">role a</div>
<div class="droptarget" id="role-b">role b</div>
<div class="droptarget" id="role-c">role c</div>
<div class="droptarget" id="role-d">role d</div>
<div class="droptarget" id="role-e">role e</div>

这是我的 JavaScript：

$(".draggable").kendoDraggable({
    group: "roles",
        hint: function(element) {
        return element.clone();
    },
    dragstart: draggableOnDragStart,
    dragend: draggableOnDragEnd
});
$(".droptarget").kendoDropTarget({ 
    group: "roles",
    dragenter: droptargetOnDragEnter,
    dragleave: droptargetOnDragLeave,
    drop: onDrop
});
function draggableOnDragStart(e) {
    $(".draggable").addClass("dragging");
}
function draggableOnDragEnd(e) {
    $(".draggable").removeClass("dragging");
}
function droptargetOnDragEnter(e) {
    $(".droptarget").addClass("drop");
}
function droptargetOnDragLeave(e) {
    $(".droptarget").removeClass("drop");
}
function onDrop(e) {
    e.draggable.destroy();
    e.draggable.element.remove();
    $(".droptarget").removeClass("drop");
    $(".draggable").removeClass("dragging");
}

问题是我希望能够使用 ctrl-click 从第一个可拖动列表中选择多个项目，然后能够将它们拖动到第二个列表中的任何可放置元素。我查看了http://docs.kendoui.com/api/framework/draggable 此处的文档，并没有看到多选可拖动元素的选项。

我正在考虑绕过剑道，只使用 jQuery，我在这里找到了几个我想要的方向的例子：jQuery Sortable - Select and Drag Multiple List Items 但是如果这可以使用剑道来完成，如果它更简单，那就太好了剑道是我们在项目中非常依赖的东西。

我的示例代码遇到的第二个问题是，在拖动时添加到可拖动项目的类被添加到所有可拖动项目，而不仅仅是选定的项目。放置目标区域也存在同样的问题——当使用可拖动元素将目标区域悬停在目标区域上时，我需要使其具有某种样式，但当前所有放置目标都获得了类。对这两件事的任何帮助都会很棒！谢谢

Answer 1

Kendo 开箱即用的可拖动不支持此功能，但您可以自己实现。您可以在父元素上创建它并使用filter 选项，而不是为每个元素创建一个可拖动元素。

这应该让你开始（从你的示例代码修改）：

HTML：

<div id='dragoptions'>
    <div class="draggable" id="person-one">person one</div>
    <div class="draggable" id="person-two">person two</div>
    <div class="draggable" id="person-three">person three</div>
    <div class="draggable" id="person-four">person four</div>
</div>

JavaScript：

$('.draggable').click(function (e) {
    if (e.ctrlKey) {
        $(this).toggleClass("dragoption");
    }
});

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

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

function draggableOnDragStart(e) {
    e.sender.draggedElementGroup = $(".dragoption");
    $(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) {
    e.draggable.draggedElementGroup.remove();

    $(".droptarget").removeClass("drop");
}

见demo here。

如果您希望单个元素可以在不先控制单击它们的情况下进行拖动，您可以尝试将点击处理程序更改为：

$('.draggable').mousedown(function (e) {
    if (e.ctrlKey) {
        $(this).toggleClass("dragoption");
    } else if (!$(this).hasClass("dragoption")) {
        $(this).siblings().removeClass("dragoption");
        $(this).addClass("dragoption");
    }
});

See demo.