Есть ли какие-либо визуальные подсказки, которые вы знаете об этом, указывают на элемент "draggability"?
Очевидные:
Спасибо за помощь!
Я действительно не могу объяснить, почему, но значок перетаскивания фона на iphone имеет некоторый смысл для меня. Это всего лишь три горизонтальные линии. В веб-приложении, которое я разрабатываю и продаю, люди сразу это поняли (ну, на классическом "пользовательском интерфейсе мыши" указатель мыши gfx также меняется на тот, который вы упомянули ранее, что является очень важным дополнительным ключом для пользовательских интерфейсов мыши).
Я также немедленно связал это с перетаскиваемой вещью! Всего три горизонтальные линии...
Но тогда это имеет смысл только для какой-то перетаскиваемой строки или строки. Я не знаю, что требуется для вашего предполагаемого приложения в деталях.
Фон (всего три простые горизонтальные линии): альтернативный текст http://manjadigital.de/demo/s/d/f/c/a/sortierer_greifer.gif
Пример использования на iPhone: 
(источник: creativealgorithms.com)
Современные браузеры поддерживают захват/захват курсора:
.dragHandle {
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.dragHandle:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
Для получения дополнительной информации (и восстановления после сбоя IE) читайте: http://uihacker.blogspot.com/2011/01/css-grab-hand-cursor.html
Когда draggability не очевидна (пример 1 в вашем вопросе), я обычно ищу "ручки" на объектах, которые выглядят как места, которые вы можете захватить. Например, в нижней части окна ответа есть один размер, чтобы изменить размер ввода текста.
Хорошо, это веб-приложение. поэтому он не должен оставлять открытым вопрос. Это зависит от того, насколько жизненно необходим интерфейс перетаскивания мышью для вашего приложения. Обычно второй вариант почти достаточно хорош - однако, человек может
НЕВОЗМОЖНО водить указатель над перетаскиваемым элементом - рассмотрите использование сенсорного экрана.
не заметить, что форма курсора изменилась, потому что они были отвлечены чем-то другим.
см. форму изменения курсора, но просто выглядите озадаченными и все же не рассматривайте возможность перетаскивания. Удивительно, но многие люди, особенно старшие и неопытные с компьютерами, не будут довольны этой концепцией управления вообще, и даже те, кто может иметь плохой день и не могут понять это.
В худшем случае человек тратит около 10 секунд, не понимая, что делать, вырывает ваше приложение и уходит негде.
Если он может использоваться для более или менее полной функциональности без, а перетаскивание - удобная функция, тогда вариант 2/3 может быть прав.
Однако, это может окупиться, чтобы сделать его полностью надежным!
предоставить четкую иконку, обозначающую элементы управления с перетаскиванием - вам придется экспериментировать с тем, что выглядит лучше всего в вашем конкретном макете, может быть простой стрелкой или рукой или может быть изображение из 2 или 3 ящиков и стрелка, показывающая, что вы ожидаете, что люди это сделают. Лично я считаю, что значок из 3-х строк будет чрезмерным и подходит только тем людям, которые хотят хорошо ознакомиться с интерфейсом, поэтому он работает на iPhone, но может быть плохим для вашего веб-приложения.
поместите этот значок непосредственно или непосредственно возле элементов управления, которые перетаскиваются. Отличие к вашим решениям 2,3 в основном состоит в том, что это остается видимым все время.
на той же странице, поставьте квадрат, который выделяется в цвете и имеет этот значок и текстовое объяснение. Если вы подозреваете, что такой ящик может повредить удобство использования, предоставьте пользователю возможность скрывать его надолго или на один день. Пользователь может случайно щелкнуть предупреждение - многие просто не читают материал, на который они нажимают, поэтому, хотя это может быть перебор, подумайте о том, чтобы заставить пользователя перетащить это уведомление в определенную область (скажем, всплывающая корзина), чтобы скрыть это, чтобы убедиться, что он действительно понял, что такое перетаскивание..oO(возможно, я должен запатентовать это... кричит, слишком поздно!:)
Если вы не хотите предоставлять текстовое объяснение, создайте свой интерфейс таким образом, чтобы его можно было использовать без перетаскивания. Учтите также, что перетаскивание не работает с каждым устройством ввода одинаково хорошо, особенно пользователи сенсорной панели могут вас ненавидеть, если вы их заставляете.
Изменить: это 6AM, кто найдет опечатки, сохранит их.
Я не люблю никого из 3, но не имею немедленного лучшего решения. Из 3 лучше всего второе, но также должно быть что-то визуально различимое относительно элементов (строка заголовка, цвет или "дескриптор" ), которая указывает, что они могут быть перемещены.
Мне также не нравится какой-либо из вариантов, но # 2 - это, вероятно, самый понятный вариант, который вы представили.
Я думаю, что лучшая кия - это визуальный дескриптор, т.е. графический элемент, который предполагает, что вы можете что-то там захватить. Часто я вижу, что это стиль как ребристая поверхность. Как на ручке ниже окна ответа или в FF ребристый элемент на ручке полосы прокрутки.
jQueryUI Sortable использует стрелки вверх и вниз, чтобы показать, что что-то можно перетащить.
Переупорядочивание списка элементов через интерфейс перетаскивания, используемый большим количеством людей (приложение Avocado, популярное семейство), использует вариант меню гамбургера (четыре строки вместо трех):
Второй - лучший. Кроме того, когда кто-то нажимает на что-то перетаскиваемое, сделайте свою границу пунктирной/пунктирной, чтобы указать, что она может быть перемещена.
Если ваш элемент пользовательского интерфейса можно свободно перемещать, может иметь смысл дать ему "уменьшающийся" край и тень. Таким образом, элемент пользовательского интерфейса кажется менее стационарным, поскольку он выглядит отключенным от остальной части пользовательского интерфейса. Похоже на окно.
В случае, если ваш элемент пользовательского интерфейса может перемещаться только вдоль одной оси, мне кажется, что "рифленая" поверхность имеет смысл.