Creating multi-select elements with Kendo drag/drop

Question

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

Answer 1

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.