javascript 使用 shift 和鼠标单击选择多个元素 - jquery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3847604/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
selecting multiple elements using shift and mouse click - jquery
提问by David
Is it possible to use shift and mouse click to select multiple elements on a page using jquery?
是否可以使用 Shift 和鼠标单击使用 jquery 选择页面上的多个元素？
I have several divs that i have given a tabindex to so that i can select them and can do things like delete them etc.
我有几个 div，我给了一个 tabindex，以便我可以选择它们并可以执行诸如删除它们之类的操作。
I want to be able to select more than 1 by holding down shift and using the mouse to click on each div and am struggling to do this.
我希望能够通过按住 shift 并使用鼠标单击每个 div 来选择 1 个以上，并且正在努力做到这一点。
Does anyone know how this can be done?
有谁知道如何做到这一点？
回答by joao
I did something like that some time ago, with jQuery:
前段时间我用 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'
}
});
Then you should do functions that select this elements and do whatever you need, I used this to drag multiple elements. Example if you want to delete this divs, you can for example:
然后您应该执行选择此元素的功能并执行您需要的任何操作，我用它来拖动多个元素。例如，如果你想删除这个 div，你可以例如：
function deleteMultiSelection(){
$('html').find('div[rel=multi-selection']).each(function(){
$(this).remove();
})
}
$("#button").click(function(){
deleteMultiSelection();
})
Be careful because I didn't test this code.
小心，因为我没有测试这段代码。
回答by Mike
I have a jQuery plugin that does exactly what you want it is called finderSelectit enables Shift+Click, Ctrl+Click, Ctrl+Click+Drag and Standard Clicking on any element.
我有一个 jQuery 插件，它完全符合您的要求，它被称为finderSelect，它可以在任何元素上启用 Shift+Click、Ctrl+Click、Ctrl+Click+Drag 和标准单击。
回答by Nick Craver
It sounds like jQuery UI Selectableis what you're after, you can try it out here.
听起来jQuery UI Selectable正是您所追求的，您可以在此处尝试一下。
To stay with OS conventions, they key it uses is Ctrland not Shift, this isn't an option you can change without changing the jQuery UI code itself. It also has the feature of click and drag over elements to get a rectangular selection as well...if that's of any use.
为了遵守操作系统约定，它们使用的关键是 isCtrl而不是Shift，这不是您可以在不更改 jQuery UI 代码本身的情况下更改的选项。它还具有单击并拖动元素以获得矩形选择的功能……如果这有任何用处。
回答by Ishan Jain
To be honest, the Ctrl + left click for selecting multiple items is pretty standard UI behaviour and built-in to the jQueryUI Selectable. Did you also know you can left click and drag a focus over multiple items to select them?
老实说，用于选择多个项目的 Ctrl + 左键单击是非常标准的 UI 行为，并且内置于 jQueryUI Selectable 中。您是否还知道可以左键单击并将焦点拖到多个项目上以选择它们？
However, I can see an advantage in offering the behaviour in question, so how about using left click or drag to select and then left click and drag to also de-select?
但是，我可以看到提供相关行为的优势，那么如何使用左键单击或拖动来选择，然后左键单击并拖动来取消选择？
It may not be the most efficient way of doing it, but after playing around with the in-built callbacks, I've come up with something that seems to work. Based on the code in your question I've hooked into the in-built callback functions to store what was selected and also handle the selection removal. JavaScript duplicated below but
这可能不是最有效的方法，但在使用内置回调之后，我想出了一些似乎有效的方法。根据您问题中的代码，我已连接到内置回调函数中以存储所选内容并处理选择删除。JavaScript 在下面重复但是
回答by unomi
Sure, if you are willing to do some work :)
当然，如果你愿意做一些工作:)
Listen for the shift keydown, set a var that you can access from within your click handler functions, if the var is set then add that item, (or their tabindex for your current implementation) to your list of items to operate on when an 'action button' is pressed.
侦听 shift keydown，设置一个可以从单击处理程序函数中访问的变量，如果设置了变量，则将该项目（或当前实现的它们的 tabindex）添加到您的项目列表中，以便在 '操作按钮'被按下。
unset the var when you get the shift keyup event.
当您收到 shift keyup 事件时取消设置 var。
