/Ben burada yapmaya çalışıyorum dair bir örnek var

Question

damla

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

Ve bu benim JavaScript'tir:

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

sorun ctrl tıklama kullanarak ilk sürüklenebilir listeden birden fazla öğe seçin ve ardından ikinci droppable unsurların herhangi sürükleyin edebilmek için mümkün istiyorum olmasıdır liste. Burada http://docs.kendoui.com/api/framework/draggable belgelerine baktım ve çok seçilebilir sürüklenebilir öğeler için bir seçenek görmedim.

Kendo'yu atlamayı ve sadece jQuery'yi kullanmayı düşünüyorum: Buraya gitmek istediğim yönün birkaç örneğini buldum: jQuery Sortable - Select and Drag Multiple List Items Ama eğer Kendo kullanarak yapılabilirse, eğer daha basitse, Kendo kadar güzel olurdu Projede çokça bağlı olduğumuz bir şey.

Örnek kodumla karşılaştığım ikinci bir sorun, sürüklenen sürüklenen öğeye eklenen sınıfın, yalnızca seçili olmayan öğelere TÜM sürüklenen öğelere eklenmesidir. Ve aynı sorun damla hedef alanıyla da var - hedef alanın sürüklenebilir bir öğeyle üzerine gelindiğinde belirli bir stil oluşturması gerekiyor, ancak tüm bırakma hedefleri şu anda sınıfı alıyor. Bu iki şeyle ilgili herhangi bir yardım inanılmaz olurdu! Teşekkür ederiz

Answer 1

Bu, Kendo tarafından kutudan sürüklenebilir değil, ancak bunu kendiniz uygulayabilirsiniz. Her öğe için sürüklenebilir bir öğe oluşturmak yerine, üst öğede oluşturabilir ve filter seçeneğini kullanabilirsiniz. Bu sizin başlamış

(örnek kodla değiştirilmiş):

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 bakınız.

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

See demo:

Eğer tıklama işleyici değiştirmeyi deneyebilirsiniz, tek elemanlar kontrol tıklayarak onları ilk olmadan sürüklenebilir olmasını istiyorsanız.