Creating multi-select elements with Kendo drag/drop

Viewed 3903

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

1 Answers
Related