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

Welcome to SO! Can you edit your question to include the pertinent bits of code from your js bin (essentially, all the JavaScript, and the body of your HTML)? That would be very helpful for people in the future, should that jsbin link ever go down. — Derek
Thanks Derek, I will make sure to do that now and in the future :) — simonfoust

Lars Höppner Lars Höppner · Accepted Answer · 2013-12-09T22:14:02

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.

Creating multi-select elements with Kendo drag/drop

1 Answers