jQuery可选择多个项目

我一直在拼凑各种SO的答案关于这个话题，但我不能弄明白。 This answer显示如何选择多个项目，但我无法弄清楚如何添加正在按下的shift键的条件。jQuery可选择多个项目

拖动多个项目选中它们，这很好。点击单个项目选择该项目，这很好。但是如果按下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"); 
    } 
})

来源

2013-11-01 colmtuite

看到这个更新小提琴：http://jsfiddle.net/5ayrW/7/

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

两个，单击并按住Shift并单击现在调用福它为自己或兄弟姐妹添加类。

来源

2013-11-04 12:02:31 ggzone

感谢队友，真棒。当我点击一个选定的元素时，它应该被取消选中。我一直在搞if语句，但我无法弄清楚：（ – colmtuite

现在的问题是，正常的点击也适用于Shift +点击。只需将点击功能放在shift +点击其他条件现在如果你拖动选择两个元素，什么都不会被选中...... – ggzone

啊，我看到。看起来像这两个（可拖动和可选择的）彼此冲突。nevermind。jquery有足够的能力来处理这个问题：通过添加一个可拖动的：start函数来更新小提琴，以增加一个选择，这里强烈推荐crossbrowsertests – colmtuite

jQuery可选择多个项目

回答

相关问题