Tạo các yếu tố chọn nhiều với Kendo kéo/thả

Question

Tôi có một ví dụ về những gì tôi đang cố gắng để làm ở đây: http://jsbin.com/OwoYAlEQ/1/edit

Đây là HTML của tôi:

<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> 

Và đây là JavaScript của tôi:

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

vấn đề là tôi muốn để có thể chọn nhiều mục từ danh sách kéo đầu tiên sử dụng ctrl-nhấp chuột, và sau đó có thể kéo chúng vào bất kỳ yếu tố droppable trong lần thứ hai danh sách. Tôi đã xem tài liệu ở đây http://docs.kendoui.com/api/framework/draggable và không thấy tùy chọn cho các yếu tố có thể kéo nhiều lựa chọn.

Tôi đang xem xét bỏ qua Kendo và chỉ sử dụng jQuery, tôi tìm thấy một vài ví dụ về hướng tôi muốn tới đây: jQuery Sortable - Select and Drag Multiple List Items Nhưng nếu điều này có thể được thực hiện bằng Kendo, nếu đơn giản hơn, Kendo sẽ đẹp hơn là thứ chúng tôi đang dựa vào rất nhiều trong dự án.

Vấn đề thứ hai mà tôi gặp phải với mã ví dụ là lớp được thêm vào mục có thể kéo khi kéo đang được thêm vào TẤT CẢ mục có thể kéo, không chỉ mục đã chọn. Và cùng một vấn đề tồn tại với vùng đích thả - tôi cần phải làm cho vùng đích có một kiểu nhất định khi di chuột qua nó với một phần tử có thể kéo được, nhưng tất cả các mục tiêu thả đều có lớp hiện tại. Bất kỳ sự giúp đỡ nào với hai điều này sẽ thật tuyệt vời! Cảm ơn bạn

Answer 1

Điều này không được Kendo kéo ra khỏi hộp, nhưng bạn có thể tự mình thực hiện. Thay vì tạo một draggable cho mỗi phần tử, bạn có thể tạo nó trên bố mẹ và sử dụng tùy chọn filter.

này sẽ giúp bạn bắt đầu (sửa đổi từ mã ví dụ của bạn):

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

Xem demo here.

Nếu bạn muốn yếu tố duy nhất để có thể kéo được mà không cần điều khiển nhấp vào chúng đầu tiên, bạn có thể thử thay đổi handler nhấp chuột để:

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

See demo.