Question

我试图在Javascript中模仿从Windows资源管理器中选择的文件。我注意到Windows资源管理器有两种类型的“选择”。一个是突出显示文件的正常选择，另一个是虚线，这意味着当前正在关注文件。所以我使用“选中”和“焦点”作为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的移位点击算法（至少是Windows 7，这就是我正在运行的）是：通过移动点击跟踪选择的最后一项不。在班次点击中，选择该项目与当前点击之间的所有项目。

示例：

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选择的最后一个项目。因此，使用shift-click选择的项目将从历史记录中排除。

这意味着要模拟Windows shift-click，你不仅可以知道选择了什么，还需要知道它是如何被选中的。

Mac OS在两个方面与Windows的行为不同。首先，如果您在当前所选项目的边界之外进行移位单击，它将始终展开。例如，如果选择了项目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

在macOS上，规则有些微妙/细微差别。我记录了它们并在此处的javascript中创建了一个实现：https://github.com/ibash/better-multiselect

基本上是：

点击
1. 将锚点和选择移动到单击的元素上
2. 选择是单击的元素
命令点击
1. 如果未选择元素
  1. 将锚点和选择移动到单击的元素上
  2. 将其添加到选择中
2. 如果已选择元素
  1. 从选择中删除
  2. 锚定/焦点移至：从点击位置选择的下一个最大索引或最小索引（向后）
按住Shift
1. 删除锚点和焦点之间的所有内容
2. 将焦点移至点击的位置
3. 在焦点和锚点之间添加所有内容

Answer 3

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

通过鼠标左键单击 Shift 和 Ctrl / Command 键，可以轻松选择页面元素。

用于“移动+单击”集合中的项目以选择它们的算法

3 个答案: