Question

我一直试图在这个主题上拼凑各种SO答案，但我无法弄明白。 This answer显示了如何选择多个项目，但我无法弄清楚如何添加按下的shift键的条件。

拖动多个项目会全部选择它们，这很棒。单击单个项目会选择该项目，这很棒。但是如果按下shift键，则单击多个项目应该全部选中它们，再次单击它们应该取消选择它们。

这是fiddle。

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

Answer 1

请参阅此更新的小提琴：http://jsfiddle.net/5ayrW/7/

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

两者，单击并按住Shift键并单击现在调用一个向自己或兄弟姐妹添加类的函数。

jQuery可选择多个项目

1 个答案: