Алгоритм для 'Shift + Clicking' элементов в коллекции для их выбора

Question

Я пытаюсь имитировать файл, выбрав из проводника Windows в Javascript. Я заметил, что Windows Explorer имеет два типа «выбора». Один из них - это обычный выбор, который выделяет файл, а другой - пунктирная линия, что означает, что в настоящее время этот файл сосредоточен. Поэтому я использую «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 Explorer. В проводнике Windows они не всегда выбирают строки между последним сосредоточенным элементом и текущим. Если в выборе нет «пробелов», они будут добавлять эти элементы к выбору. Но если есть пробел, он начнется с фокуса.

Я не уверен, как я должен это делать. Кажется, что алгоритм, который они используют в Windows, немного сложный для меня. Поэтому, если кто-нибудь может мне помочь или подтолкнуть меня в правильном направлении, я был бы признателен.

Answer 1

Алгоритм смены щелчков для Windows (по крайней мере, для Windows 7, который я запускаю): Отслеживание последнего выбранного элемента не с помощью щелчка. При щелчке по щелчку выберите все элементы между этим элементом и текущим кликом включительно.

Примеры:

1) Если у вас есть только пункт 5 выбран, и сдвиг кнопкой мыши 8, он будет выбрать 5-8.

2) Если у вас есть элемент 5, затем нажмите ctrl-click 3, затем нажмите shift-click 8, затем он выберет 3-8. Но если у вас выбран пункт 3, затем нажмите Ctrl + 5, затем нажмите «Shift» 8, вместо этого выберем 5-8. Так что история имеет значение.

3) Если у вас есть пункт 5, нажмите shift-click 8, он выберет 5-8; если вы следуете за ним с помощью щелчка 3, он отменит выбор 5-8 и выберите 3-5. Несмотря на то, что последний выбранный элемент был 8, он использует 5 в качестве привязки, поскольку это был последний элемент, который не был выбран с помощью щелчка смены. Поэтому элементы, выбранные с помощью щелчка смены, исключаются из истории.

Это означает, что для эмуляции щелчка Windows shift-click вы не можете просто знать, что выбрано, вам нужно знать, как он был выбран.

Mac OS ведет себя иначе, чем Windows, двумя способами. Во-первых, если вы смещаете щелчок за пределами выделенных элементов, он всегда расширяется. Например, если у вас выбран пункт 5, затем нажмите «Shift» 8, он выберет 5-8. Если вы затем переместите мышью на 3, он расширит выделение до 3-8, а не отменит выбор 5-8 и выберите 3-5, как Windows. Во-вторых, если вы нажмете внутри границ текущего выбора, он будет заполняться от самого верхнего выбранного элемента до элемента, на который вы нажали. Если у вас есть пункты 3 и 8, и нажмите «5», он выберет 3-5, независимо от того, вы недавно нажали 3 или 8. Чтобы подражать Mac OS, вам не нужно отслеживать историю.

Answer 2

Попробуйте этот плагин: https://github.com/luckyseven/jquery-multiselector

Простой способ сделать элементы страницы, выбираемые с помощью Сдвиг и Ctrl/Command клавиши с левой кнопкой мыши.