剣道のドラッグで複数選択要素の作成/私は私がここで何をしようとしているの例を持って

Question

をドロップ：

<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のである：http://jsbin.com/OwoYAlEQ/1/edit

は、これが私のHTMLです：

$(".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キーを押しながらクリックを使用して最初のドラッグ可能なリストから複数の項目を選択できるようにしたいということで、次いで第2にドロップ可能な要素のいずれかにドラッグすることができますリスト。私はここでドキュメントhttp://docs.kendoui.com/api/framework/draggableを見て、マルチ選択可能なドラッグ可能な要素のオプションが表示されませんでした。

剣道をバイパスしてjQueryを使用することを検討していますが、私がここに行きたい方向の例をいくつか見つけました：jQuery Sortable - Select and Drag Multiple List Itemsこれは剣道を使って行うことができれば簡単ですプロジェクトで多くのことを頼りにしていることです。

私のコード例で問題になっているのは、ドラッグ時にドラッグ可能なアイテムに追加されるクラスが、選択したアイテムだけでなく、すべてのドラッグ可能アイテムに追加されていることです。そして、ドロップターゲットエリアにも同じ問題が存在します。ドラッグ可能な要素でマウスを移動すると、ターゲットエリアに特定のスタイルを設定する必要がありますが、すべてのドロップターゲットが現在クラスを取得します。これらの2つのことについての助けはすばらしいでしょう！ありがとう

Answer 1

これは、剣道のドローボックスではサポートされていませんが、あなた自身で実装することができます。各要素のドラッグ可能な要素を作成する代わりに、親要素にドラッグ可能な要素を作成し、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。