使用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.c​​om/api/framework/draggable中的文档,但没有看到多选可拖动元素的选项.

我正在考虑绕过Kendo并且只使用jQuery,我找到了几个我想要去的方向示例:jQuery Sortable - 选择并拖动多个列表项但是如果可以使用Kendo完成,如果它更简单,那就会很好,因为剑道是我们在项目中非常依赖的东西.

我对我的示例代码的第二个问题是,在拖动时添加到可拖动项目的类正被添加到所有可拖动项目,而不仅仅是所选项目.并且下拉目标区域存在同样的问题 - 我需要使用可拖动元素将目标区域悬停在其上时具有某种样式,但是所有下拉目标都会获得当前类.对这两件事的任何帮助都会很棒!谢谢

Answer 1

剑道的开箱即用不支持这一点,但你可以自己实现.您可以在父项上创建它并使用过滤器选项,而不是为每个元素创建可拖动项.

这应该让你开始(从你的示例代码修改):

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

在这里看演示.

如果您希望单个元素可以在不进行控制的情况下进行拖动,则可以尝试将单击处理程序更改为:

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

见演示.