在一个集合中选择它们的'Shift +单击'项的算法

Question

我想模仿从Javascript中的Windows资源管理器中选择的文件。我注意到Windows资源管理器有两种类型的“选择”。一个是突出显示文件的正常选择，另一个是虚线，这意味着该文件目前正在关注。所以我使用“selected”和“focus”作为css类。

Here你可以在我的网页上找到我的代码的例子。

在我的代码中，它只是找到焦点项目和当前项目之间的行并选择它们。

select: function (e) { 
    if (e.ctrlKey) { 
     rs.removeFocus(); 
     $(this).toggleClass("selected"); 
     $(this).addClass("focus"); 
    } 
    else if (e.shiftKey) { 
     var focusItem = $("#Items p.focus"); 
     var currentItem = $(this); 
     var betweenItems = rs.betweenItems(currentItem, focusItem); 

     rs.unSelectAll(); 
     rs.removefocus(); 

     $(betweenItems).each(function() { 
      this.addClass("selected"); 
     }); 

     focusItem.addClass("selected"); 
     $(this).addClass("focus"); 
     $(this).addClass("selected"); 
    } 
    else { 
     rs.unSelectAll(); 
     rs.removeFocus(); 
     $(this).addClass("selected"); 
     $(this).addClass("focus"); 
    } 
} 

这个工作“好”，但它不完全像Windows资源管理器选择一样先进。在Windows资源管理器中，它们并不总是选择最后一个重点项目和当前项目之间的行。如果选择中没有“空白”，他们会将这些项目添加到选择中。但是如果有差距，它将从重点项目开始。

我不知道我该怎么做。看来他们在Windows中使用的算法对我来说有点复杂。所以如果有人能帮助我，或者把我推向正确的方向，我将不胜感激。

Answer 1

对于Windows的shift-click算法（至少Windows 7，这是我正在运行）是：跟踪最后选择的项目而不是通过移位点击。按住Shift并单击，选择该项目与当前点击之间的所有项目。

例子：

1）如果你只有5项选中，按住Shift键单击8，将选择5-8。 2）如果您选择了项目5，然后按住Ctrl键单击3，然后按住Shift并单击8，然后它将选择3-8。但是，如果您选择了项目3，则按住Ctrl并单击5，然后按住Shift并单击8，它将选择5-8。所以历史很重要。 3）如果您选择了项目5，则按住Shift并单击8，它将选择5-8;如果您按住shift并单击3，它将取消选择5-8并选择3-5。尽管最后选择的项目是8，但它使用5作为锚点，因为它是最后一个没有通过移位点击选择的项目。因此，使用Shift-click选择的项目将从历史记录中排除。

这意味着要模拟Windows shift-click，你不能只知道选择了什么，你需要知道它是如何选择的。

Mac OS的行为与Windows有两种不同之处。首先，如果您在当前选定项目的范围外按住Shift键，则它总是展开。例如，如果您选择了项目5，则按住Shift并单击8，它将选择5-8。如果您随后按住Shift并单击3，则会将选区扩大到3-8，而不是取消选择5-8，并选择3-5，如Windows所示。其次，如果您在当前选择的范围内单击，它将从最上面的选定项目填充到您单击的项目。如果您选择了项目3和项目8，并按住Shift并单击5，则无论您最近单击了3还是8项，它都将选择3-5。因此要模拟Mac OS，您不需要跟踪历史记录。

Answer 2

试试这个插件：https://github.com/luckyseven/jquery-multiselector

一个简单的方法，使页面元素可选择使用移和按Ctrl /命令键与鼠标左键。