javascript - 複数のアイテムで選択可能なjQuery

Question

このトピックに関するさまざまなSOの回答をまとめようとしていますが、よくわかりません。この回答は、複数のアイテムを選択する方法を示していますが、シフトキーが押されているという条件を追加する方法がわかりません。

複数のアイテムをドラッグすると、それらがすべて選択されます。これは素晴らしいことです。単一のアイテムをクリックすると、そのアイテムが選択されます。これは素晴らしいことです。しかし、シフトキーが押されている場合、複数の項目をクリックするとそれらがすべて選択され、もう一度クリックすると選択が解除されます。

ここにフィドルがあります。

HTML

<div id="canvas">
    <div class="elemContainer ui-selected" style="position: absolute; top: 50px;
    left: 50px; width: 100px; height: 100px;">     
        <div class="elem" style="position: absolute; width: 100%; height: 100%; 
        background: pink;"></div>
    </div>

     <div class="elemContainer ui-selected" style="position: absolute; top: 50px;
    left: 50px; width: 100px; height: 100px;">     
        <div class="elem" style="position: absolute; width: 100%; height: 100%; 
        background:  coral;"></div>
    </div>
</div>

Javascript

$('#canvas').selectable();

$('.elemContainer').draggable();

// Fix single click selection
$(".elemContainer").click(function() {
    if (!$(this).hasClass("ui-selected")) {
        $(this).addClass("ui-selected").siblings().removeClass("ui-selected");
    }
})