創建多選元素與劍道拖/放

Question

我有什麼，我想在這裏做一個例子：http://jsbin.com/OwoYAlEQ/1/edit

這是我的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> 

這是我的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"); 
} 

的問題是，我希望能夠用CTRL單擊從第一拖動列表中選擇多個項目，然後可以將它們拖動到任何可投放的元素在第二名單。我查看了這裏的文檔http://docs.kendoui.com/api/framework/draggable，並沒有看到多選可拖動元素的選項。

我正在考慮繞過劍道，只是使用jQuery，我發現了幾個我想要去這裏的方向的例子：jQuery Sortable - Select and Drag Multiple List Items但是如果這可以使用劍道來完成，如果它更簡單，那將會很好，因爲劍道這是我們在項目中依賴很多的東西。

我對示例代碼的第二個問題是添加到可拖動項目的拖動類將被添加到所有可拖動項目中，而不僅僅是所選的項目。同樣的問題存在於放置目標區域 - 我需要使用可拖動元素將其懸停在目標區域上時具有特定樣式，但所有放置目標都會當前獲取該類。這兩件事的任何幫助都會很棒！謝謝

Answer 1

這不是Kendo的可拖動開箱即用的，但您可以自己實現。您不必爲每個元素創建可拖動的元素，而是可以在父元素上創建它並使用filter選項。

這應該讓你開始（從你的示例代碼修改）：

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

見demo here。

如果你想單元素是沒有控制單擊他們先拖動的，你可以嘗試改變單擊處理程序：

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

See demo。