Пользовательский интерфейс для изменения порядка элементов списка

Question

У меня есть список элементов в составе веб-приложения. Вопрос в том, как пользователь может управлять порядком элементов в списке (а не порядком сортировки списка). Типичный способ - использовать кнопки со стрелками для перемещения элементов вверх или вниз. Другой способ - перетаскивание.

Но есть ли другие способы для пользовательского интерфейса для переупорядочения списков?

Answer 1

Я думал о «Переместить сюда»:

1. Разрешить выбор всех элементов с помощью флажков
2. Пусть все элементы имеют кнопку или значок, означающий «Переместить выделенный сюда»
3. При нажатии «Переместить выделенное сюда» все выбранные элементы перемещаются к этому элементу в существующем порядке

Крайние случаи здесь, когда элементы должны быть перемещены в любой конец списка. Один из способов решить эту проблему - переместить все выбранные элементы перед целью и зарезервировать специальную кнопку / значок в конце, чтобы переместить выделение туда.

Answer 2

Для меня выполнение перетаскивания элементов списка на месте (т. Е. Внутри самого списка) - лучший подход.

Мало того, что вы можете дать своим пользователям непосредственное представление о том, как будет выглядеть их список (список реорганизуется на их глазах), но им также очень легко понять механизм перемещения. И это самый короткий способ, чтобы ваши пользователи упорядочивали список за самое короткое количество ходов.

Кстати, предвидя, что список может быть длиннее нескольких элементов, наряду с методом DnD вы можете предоставить асинхронный способ упорядочения списка: дать пользователю возможность присвоить порядковый номер каждой записи, а затем нажать на кнопку "Заказать". Обрабатывая вводимые пользователем данные правильно и корректно, это может ускорить редактирование более длинных списков.

Answer 3

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

1) Если пользователь хочет установить порядок элементов списка / сетки, он нажимает кнопку «Изменить порядок».

2) Откроется диалоговое окно переупорядочения, которое можно использовать с любым списком или сеткой.

3) В диалоговом окне все элементы отображаются в их текущем порядке в списке слева. Справа есть пустой список.

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

5) Пользователь может затем применить новый заказ или отменить. Применение порядка приводит к тому, что в поле «Порядок отображения» в данных устанавливается окончательный порядок элементов в правом списке. Вы можете решить, будет ли кнопка «Применить» активна только тогда, когда левый список пуст.

6) В диалоговом окне заказа также доступны следующие элементы управления:

a) Кнопка для перемещения всех элементов из левого списка в правый список, сохраняя порядок, в котором они находятся

b) Кнопка, чтобы начать сначала, перезагрузив левый список в его первоначальном порядке и очистив правый список.

в) Кнопка для сортировки правильного списка по алфавиту (или по дате, или по цифрам, в зависимости от того, какое поле ключа)

d) Возможность перетаскивания в правом списке для ручного перетаскивания элементов в порядке.

e) Столбец с порядковым номером в правом списке, который при редактировании перемещает элемент на эту позицию.

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

Я использовал этот подход много лет, и он был очень эффективным.

Answer 4

Вы можете показать наложение при наведении на элемент. Это наложение показывает вам 4 стрелки (n / e / s / w), и вы можете соответственно щелкнуть и переместить элемент.

Если вы пытаетесь упорядочить элементы по сетке, такие как функции группировки фотографий в Facebook и Picasaweb, то это единственный способ справиться с этим

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

Answer 5

Вы можете отображать кнопки «Вверх» и «Удалить» точно так же, как это делает Google для SearchWiki. Большинство людей имеют хоть какой-то опыт с этим сейчас. Большинство людей беспокоятся только о «повышении» своего выбора. Если им что-то не нравится, и они хотят понизить голос, им будет проще удалить из списка вышеупомянутую кнопку «Удалить»