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但是如果可以使用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。

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

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

See demo

使用Kendo拖放创建多选元素

1 个答案: