Javascript jQuery可选择多个项目

我一直在试图拼凑关于这个话题的各种答案，但我不太明白。显示如何选择多个项目，但我不知道如何添加按下shift键的条件

拖动多个项目可以选择所有项目，这很好。单击单个项目选择该项目，这很好。但如果按下shift键，单击多个项目应将其全部选中，再次单击应将其取消选中

这是一个例子

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>

请参阅此更新的小提琴：

---

同时，单击和按住shift键并单击，现在调用一个函数，将类添加到自身或兄弟姐妹中。

谢谢，伙计，这太棒了。当我按住shift键并单击选定的元素时，它应该被取消选中。我一直在搞乱if语句，但我不明白：（现在的问题是，普通的点击也适用于shift+click。只需将点击功能置于shift+click else条件下就行了。另外，我现在为shiftclick使用了toggleClass，这使它更智能。更新了小提琴。啊，我明白了。奇怪的是，现在如果你拖动以选择两个元素，没有任何东西会出现问题。）当选…..看起来像这两个（可拖动和可选择）相互冲突。nevermind.jquery强大到足以处理此问题：通过添加可拖动的：start函数来更新fiddle以添加选择。此处强烈建议使用交叉行测试argh…似乎通过交叉拖动的多重选择不再起作用…但我想你可以通过某种方式修复它。；）

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

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

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

.click(function(e) {
 if (e.shiftKey) {