使用 shift 和鼠标点击选择多个元素 - jQuery

Question

是否可以使用jQuery通过按住Shift键和鼠标点击来选择页面上的多个元素？

我有几个div元素，我给它们设置了tabindex，这样我就可以选择它们并执行删除等操作。

我希望能够通过按住shift并使用鼠标单击每个div来选择多个元素，但我无法做到这一点。

有谁知道如何实现这个功能吗？

- David

Answer 1

我之前也做过类似的事情，使用了jQuery:

$(id).click(function(event){    //Mouse Click+shift event 
        if(event.shiftKey){
                     //give some attribute that can indentify the elements of the selection
                     //example rel='multi-selection' or class='multi-selection'
        }
});

接下来您需要编写函数来选择这些元素并执行您所需的操作，我曾使用此方法来拖动多个元素。例如，如果您想要删除这些div元素，您可以使用以下代码：

function deleteMultiSelection(){
    $('html').find('div[rel=multi-selection']).each(function(){
          $(this).remove();
     })

} 

$("#button").click(function(){
    deleteMultiSelection();
})

请注意，因为我没有测试过此代码。

- joao

Answer 2

我有一个jQuery插件，它可以完全满足你的需求，它叫做finderSelect，它可以启用Shift+点击、Ctrl+点击、Ctrl+点击+拖动和标准点击任何元素。

- Mike

Answer 3

看起来你需要的是jQuery UI Selectable，你可以在这里尝试一下。

为了遵循操作系统的惯例，它使用的键是Ctrl而不是Shift，这不是一个可以通过更改jQuery UI代码来改变的选项。 它还具有单击并拖动元素以获得矩形选择的功能...如果有用的话。

- Nick Craver

---

我只想补充一下，使用Shift键选择多个相邻项是默认行为。 - Stefan Bergfeldt

Answer 4

说实话，使用Ctrl +左键单击选择多个项目是相当标准的UI行为，并内置于jQueryUI Selectable中。您是否知道您可以左键单击并拖动焦点以选择多个项目？

然而，我可以看到提供所需的行为有优势，那么如何使用左键单击或拖动来选择，然后再使用左键单击和拖动来取消选择呢？

这可能不是最有效的方法，但在尝试内置回调后，我想出了一些似乎可行的东西。基于您问题中的代码，我已经钩入了内置的回调函数来存储所选内容并处理选择删除。以下是JavaScript的副本。

- Ishan Jain

Answer 5

当然，如果你愿意做一些工作的话 :)

监听 shift 键按下事件，设置一个变量，你可以从点击处理函数中访问该变量，如果该变量被设置，则在“操作按钮”被按下时将该项（或其 tabindex，适用于当前实现）添加到要操作的项目列表中。

当你收到 shift 键抬起事件时取消该变量的设置。

- unomi