Доступное перетаскивание с несколькими элементами

 <ol data-draggable="target"> <li data-draggable="item">Item 0</li> <li data-draggable="item">Item 1</li> <li data-draggable="item">Item 2</li> <li data-draggable="item">Item 3</li> </ol> 

Хотя в большинстве примеров эти атрибуты используются в статическом HTML, я думаю, что это противоречит принципу разделения — поскольку он позволяет перетаскивать элемент, но на самом деле вы не можете его нигде удалить без сопровождающего JavaScript. Поэтому вместо этого я использовал статические атрибуты данных, чтобы идентифицировать перетаскиваемые элементы, а затем использовал сценарии, чтобы применить draggable атрибут к браузерам, которые проходят обнаружение объектов.

Этот подход также предоставляет возможность исключить любые неработающие реализации в тех случаях, когда не удается обнаружить функцию . Opera 12 или более ранняя window.opera исключена с помощью теста window.opera , потому что его реализация довольно глючная и больше не стоит тратить время на нее.

Доступный Drag and Drop

Доступность является основополагающим принципом проектирования, и это всегда легче сделать правильно, если рассматривать в этих терминах. Поэтому, прежде чем идти дальше с этой демонстрацией, мы должны иметь четкое представление о требованиях к доступности клавиатуры и программы чтения с экрана.

В ARIA Authoring Practices есть раздел, посвященный перетаскиванию , в котором описаны необходимые атрибуты, а также приведены рекомендации по работе взаимодействий. Подвести итоги:

1. Перетаскиваемые элементы идентифицируются как aria-grabbed="false" и должны перемещаться с помощью клавиатуры.
2. Предоставьте пользователю механизм выбора элементов, которые он хочет перетащить, и рекомендуется использовать клавишу « Пробел» . Когда элемент выбран для перетаскивания, его атрибут aria-grabbed имеет значение "true" .
3. Предоставьте пользователю механизм для указания того, что он закончил делать выбор, и рекомендуемое нажатие клавиши — Control+M
4. Затем целевые элементы идентифицируются с помощью aria-dropeffect со значением, которое указывает, какие действия разрешены, например, "move" или "copy" . На этом этапе процесса целевые элементы также должны перемещаться с помощью клавиатуры.
5. Когда пользователь достигает целевого элемента, предоставьте ему механизм для выполнения действия удаления, и рекомендуемое нажатие клавиши также Control+M
6. Пользователи могут отменить всю операцию в любое время, нажав клавишу Escape .
7. Когда действие завершено или прервано, очистите интерфейс, установив для всех атрибутов aria-dropeffect значение "none" (или удалив их), а для всех атрибутов aria-grabbed — "false" .

Теперь два атрибута ARIA , aria-grabbed и aria-dropeffect , должны использоваться в соответствии со спецификацией. Тем не менее, события и взаимодействия являются просто рекомендациями, и нам не нужно рабски следовать им. Тем не менее, мы должны (и будем) следовать этим рекомендациям как можно точнее, потому что они наиболее близки к нормативной ссылке.

И по большей части, я думаю, что это имеет смысл. Но я не согласен с обоими вариантами использования клавиши Control+M Я не убежден, что действительно необходимо иметь нажатие клавиши в конце выбора, и я не уверен, что само нажатие клавиши очень интуитивно понятно для зрячих пользователей клавиатуры.

Поэтому я думаю, что лучший подход — это дополнить эти рекомендации:

• Мы осуществим нажатие клавиши в конце выбора, но это не потребует и не предотвратит дальнейший выбор, это просто будет ярлык для перемещения фокуса к первому целевому объекту.
• Мы будем использовать Control+M для обоих нажатий клавиш, но мы также позволим запускать действие сброса клавишей Enter .

В руководствах также говорится о реализации множественного выбора с использованием модификаторов. Рекомендуется использовать Shift+Space для непрерывного выбора (т.е. выбор всех элементов между двумя конечными точками) и Control+Space для несмежного выбора (т.е. выбор произвольных элементов). Это, безусловно, лучшие модификаторы для использования … однако для Mac эквивалентом Control+Space будет Command+Space , но это уже связано с действием системы и не может быть подавлено JavaScript. Может быть, мы могли бы использовать Control , но пользователи Mac не ожидали этого, поскольку клавиша Control в основном используется только для нажатия правой кнопки мыши. Единственный оставшийся выбор — Shift , но он предназначен для непрерывного выбора!

Поэтому для простоты и в обход этой проблемы мы не собираемся осуществлять непрерывный отбор. Самая простая вещь, которую мы можем сделать сейчас, — это поддержать все три модификатора для несмежного выбора — Command + Space , Control + Space или Shift + Space — все обрабатываются одинаково на каждой платформе — тогда все, что может вызвать конкретный пользователь, и все, что они думают, имеет смысл, доступно.

Множественный выбор

Теперь, когда у нас есть четкое представление о том, что требуется для доступности клавиатуры, мы можем приступить к реализации событий выбора как для мыши, так и для клавиатуры. Выбор элемента неизбежно будет означать добавление class или атрибута для обозначения выбора, поэтому давайте использовать aria-grabbed в обоих случаях. Это даст нам удобный и семантически подходящий стиль оформления и даст возможность поддерживать перекрестную модальность — то есть способность поддерживать любую комбинацию взаимодействия мыши и клавиатуры, вместо того, чтобы предполагать, что будет использоваться только один или другой.

Итак, начнем с обновления исходного кода, который применил draggable , чтобы он также применял значения по умолчанию для aria-grabbed и tabindex :

 for(var items = document.querySelectorAll('[data-draggable="item"]'), len = items.length, i = 0; i < len; i ++) { items[i].setAttribute('draggable', 'true'); items[i].setAttribute('aria-grabbed', 'false'); items[i].setAttribute('tabindex', '0'); } 

Затем мы можем реализовать функцию выбора, начиная с событий мыши.

Выбор мыши

В этой демонстрации вы можете сделать одиночный выбор мышью или множественный выбор с помощью модификатора (и это все, что вы можете сделать). Но обратите внимание, что несколько выборок могут быть сделаны только в пределах одного контейнера, вы не можете сделать выбор между несколькими контейнерами:

 for(var targets = document.querySelectorAll('[data-draggable="target"]'), len = targets.length, i = 0; i < len; i ++) { targets[i].setAttribute('aria-dropeffect', 'none'); } 

 [data-draggable="target"] { border-color:#888; background:#ddd; color:#555; } [data-draggable="target"][aria-dropeffect="move"] { border-color:#68b; background:#fff; } 

 var related = null; document.addEventListener('dragenter', function(e) { related = e.target; }, false); document.addEventListener('dragleave', function(e) { //the related var is this event's relatedTarget element }, false); 

 function getContainer(element) { do { if(element.nodeType == 1 && element.getAttribute('aria-dropeffect')) { return element; } } while(element = element.parentNode); return null; } 

 document.addEventListener('dragleave', function(e) { var droptarget = getContainer(related); if(droptarget != selections.droptarget) { //... update target highlighting selections.droptarget = droptarget; } }, false); 

 for(var len = items.length, i = 0; i < len; i ++) { droptarget.appendChild(items[i]); }