Creazione multi-selezionare gli elementi con Kendo il drag/drop

Question

ho un esempio di quello che sto cercando di fare qui: http://jsbin.com/OwoYAlEQ/1/edit

Questo è il mio 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> 

E questa è la mia 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"); 
} 

il problema è che voglio essere in grado di selezionare più elementi dalla prima lista trascinabile utilizzando ctrl-click, e quindi in grado di trascinarli ad uno qualsiasi degli elementi droppable nel secondo elenco. Ho esaminato la documentazione qui http://docs.kendoui.com/api/framework/draggable e non ho visto un'opzione per elementi trascinabili selezionabili.

Sto considerando di ignorare Kendo e di usare solo jQuery, ho trovato un paio di esempi della direzione in cui voglio andare qui: jQuery Sortable - Select and Drag Multiple List Items Ma se questo può essere fatto usando Kendo, se è più semplice, sarebbe bello come Kendo è qualcosa su cui ci affidiamo molto al progetto.

Un secondo problema che sto riscontrando con il mio codice di esempio è che la classe aggiunta a un elemento trascinabile in trascinamento viene aggiunta a TUTTI gli elementi trascinabili, non solo a quelli selezionati. E lo stesso problema esiste con l'area di destinazione del drop: ho bisogno di fare in modo che l'area di destinazione abbia un certo stile quando ci si libra sopra con un elemento trascinabile, ma tutti i target di rilascio ottengono la classe al momento. Qualsiasi aiuto con queste due cose sarebbe fantastico! Grazie

Answer 1

Questo non è supportato da Kendo che può essere trascinato fuori dalla scatola, ma è possibile implementarlo da soli. Invece di creare un trascinamento per ogni elemento, è possibile crearlo sul genitore e utilizzare l'opzione filter.

Questo dovrebbe iniziare (modificato dal codice esempio):

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

Vedi demo here.

Se si desidera singoli elementi per essere trascinabili senza controllo-clic su di essi in primo luogo, si potrebbe provare a cambiare il gestore clicca per:

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

See demo.