Creating multi-select elements with Kendo drag/drop

jquery, kendo-ui

Solution

This is not supported by Kendo's draggable out of the box, but you can implement it yourself. Instead of creating a draggable for each element, you can create it on the parent and use the filter option.

This should get you started (modified from your example code):

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

See demo here.

If you want single elements to be draggable without control-clicking them first, you could try changing the click handler to:

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

See demo.

Problem

I have an example of what I'm trying to do here: http://jsbin.com/OwoYAlEQ/1/edit This is my 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> ``` And this is my 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"); } ``` The problem is that I want to be able to select multiple items from the first draggable list using ctrl-click, and then be able to drag them to any of the droppable elements in the second list. I looked at the documentation here http://docs.kendoui.com/api/framework/draggable and did not see an option for multi-selectable draggable elements. I'm considering bypassing Kendo and just using jQuery, I found a couple of examples of the direction I want to go here: jQuery Sortable - Select and Drag Multiple List Items But if this can be done using Kendo, if it's simpler, that would be nice as Kendo is something we're relying on a lot in the project. A second issue I'm having with my example code is that the class that is added to a draggable item on drag is being added to ALL the draggable items, not just the selected one. And the same problem exists with the drop target area -- I need to make the target area have a certain style when hovering over it with a draggable element, but all of the drop targets get the class currently. Any help with these two things would be amazing! Thank you

Original source

Related problems