Веб: Как мне создать контейнер div, чтобы обычный пользователь знал, что он перетаскивается?

Question

Я сделал в своем приложении asp.net небольшой контейнер div, который равен draggable (таким образом: Создание перетаскиваемой ручки jQuery-ui охватывает всю страницу ).

Я хочу пояснить, что обычный пользователь инстинктивно знает, что он / она может перетаскивать этот контейнер вокруг страницы.

Я установил курсор через CSS на cursor: move;. Но с этим решением пользователь получает знания только при наведении мышки на небольшой контейнер.

Как я могу убедиться, что пользователь с самого начала знает, что этот маленький div можно перетаскивать?

Answer 1

Вы можете установить этот тип изображения на div, который можно перетаскивать.Это изображение будет всегда видимым, так что пользователь может легко узнать, что это div - draggalbe, и, конечно, с помощью css вы можете поместить его в центр над div.и изображение будет иметь тип png, поэтому оно не будет выглядеть уродливым, и вы можете применить прозрачность, чтобы изображение руки было таким, чтобы изображение элемента div можно было увидеть, даже если изображение находится над элементом div.
и да, есть и другие предложения, предложенные @Prabhavith и @Matt Lowe .. Вы также можете обойти это.

Answer 2

Как и изображение в связанном вопросе, вы можете сделать свой перетаскиваемый элемент div больше похожим на традиционное окно рабочего стола. Пользователи привыкли перетаскивать окна, в верхней части которых находится строка заголовка, а также кнопки минимизации, масштабирования и закрытия, а также границы с необязательным скосом. Аппроксимация этого стиля поможет передать перетаскиваемость.

Точно так же, когда граница вокруг div станет темнее или подсветка поможет также улучшить перетаскиваемость.

Answer 3

Единственный способ, которым я видел это, который имеет какой-то смысл для меня, - это иметь слабо написанное сообщение со словом «Перетаскивание» и стрелками, указывающими через четыре ординала, центрированных в div.

Answer 4

Вы можете перейти на этот сайт http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/DragPanel/DragPanel.aspx