jquery - 使用 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并且没有看到多选可拖动元素的选项。

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

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

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 .

如果您希望在不先按住 Control 键单击单个元素的情况下即可拖动单个元素，您可以尝试将单击处理程序更改为:

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

See demo .