Question

是否可以使用shift和鼠标单击使用jquery在页面上选择多个元素？

我有几个div，我给了tabindex，以便我可以选择它们并可以执行删除它们等操作。

我希望能够通过按住shift并使用鼠标点击每个div来选择1个以上，并且我正在努力做到这一点。

有谁知道如何做到这一点？

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

小心，因为我没有测试这段代码。

Answer 2

我有一个jQuery插件，可以完全按照你想要的名称finderSelect启用Shift + Click，Ctrl + Click，Ctrl + Click + Drag和Standard点击任何元素。

Answer 3

听起来jQuery UI Selectable就是你所追求的，you can try it out here。

为了保持操作系统约定，它们使用的键是 Ctrl 而不是 Shift ，这不是一个可以在不更改jQuery UI代码本身的情况下更改的选项。它还具有点击和拖动元素的功能，以获得矩形选择...如果有任何用途。

Answer 4

当然，如果你愿意做一些工作：）

监听shift keydown，设置一个可以从单击处理函数中访问的var，如果设置了var，则将该项（或其当前实现的tabindex）添加到要操作的项列表中当按下“动作按钮”时。

在获得shift keyup事件时取消设置var。

Answer 5

老实说，Ctrl +左键单击选择多个项目是非常标准的UI行为，内置于jQueryUI Selectable。您是否也知道可以左键单击并将焦点拖到多个项目上以选择它们？

但是，我可以看到提供相关行为的优势，那么如何使用左键单击或拖动来选择然后左键单击并拖动以取消选择？

这可能不是最有效的方式，但在玩完内置回调后，我想出了一些似乎有用的东西。基于你问题中的代码，我已经连接到内置的回调函数来存储所选的内容并处理选择删除。 JavaScript重复在下面，但

使用shift和鼠标单击选择多个元素 - jquery

5 个答案: