Как сделать форму перетаскиваемой
Добавил пользователь Alex Обновлено: 05.10.2024
Перетаскивание элементов мышью это удобный прием для задания сортировки списков, таблиц, блоков и т.д. Самый простой способ это реализовать – использование плагина jQuery UI Sortable.
Перетаскивание списков
Перетаскивание за определенный элемент
Если в списке нужно будет выделять и копировать текст, например в текстовых полях, то перемещение за всю область сделает это проблематичным. Поэтому делают перемещение кликнув по иконке, так можно сделать добавив параметр handle и указав в нем название ее класса.
Предоставление данных для перетаскивания из обработки
Эти свойства устанавливаются в палитре свойств:
Элемент — имеет значение ТабличноеПоле и тип — ТабличноеПоле.
ПараметрыПеретаскивания — имеет следующие три свойства:
Элемент — имеет значение ТабличноеПоле и тип — ТабличноеПоле.ПараметрыПеретаскивания — имеет следующие три свойства:
СтандартнаяОбработка — параметр, указывающий нужно ли производить вставку передаваемого значения в поле табличного документа.
Строка — текущая строка табличного поля
Колонка — текущая колонка табличного поля
Как только я узнал о существовании перетаскивания, я очень удивился тому факту, что оно так мало используется в типовых конфигурациях. И решил я реализовать свой взгляд на эффективное использование этого механизма.
Для начала немного общих моментов о самом механизме.
Самое понятие "перетаскивание" (Drag&Drop) подразумевает интерактивную передачу значения от источника приемнику.
Событий перетаскивания всего 4:
- НачалоПеретаскивания
- ОкончаниеПеретаскивания
- ПроверкаПеретаскивания
- Перетаскивание
Для первой пары событий необходимо установить флажок в настройках элемента управления "Разрешить начало перетаскивания". Для второй пары - "Разрешить перетаскивание".
Перетаскивание реализовано для двух видов элементов управления: ТабличноеПоле и ПолеТабличногоДокумента. Для поля табличного документа есть некоторые ограничения. Во-первых, в режиме ТолькоПросмотр обрабатываются только первая пара событий, т.е. в этом случае оно не может выступать в качестве приемника. Во-вторых, начало перетаскивания может быть вызвано только для одной прямоугольной области.
У каждого типа обработчика события перетаскивания есть параметр ПараметрыПеретаскивания.
Этот параметр представляет собой структуру из 3-х элементов:
- Действие
- ДопустимыеДействия
- Значение
Начнем с последнего параметра - Значение. Он при стандартном начале перетаскивания в разных случаях имеет различный тип. Если источником является элемент управления типа ТабличноеПоле, то значение перетаскивания будет иметь тип строки значения табличного поля в одиночном режиме выделения и тип Массив в случае множественного режима выделения, где элементами массива будут строки значения табличного поля. В случае поля табличного документа тип значения будет ТабличныйДокумент и будет содержать одну выделенную прямоугольную область.
Параметр Действие отвечает за внешний вид курсора и используется для управления типом перетаскивания. Он может принимать 4 значения:
- Выбор
- Копирование
- Отмена
- Перемещение
При перетаскивании левой кнопкой мыши по умолчанию Действие содержит Перемещение. Если пользователя дополнительно удерживает нажатой клавишу , то Действие содержит Копирование. Если претаскивание производится правой кнопкой мыши, то по умолчанию Действие содержит Выбор независимо от состояния клавиши . При этом, когда вы освободите правую кнопку мыши в приемнике, по умолчанию будет выведено всплывающее меню выбора, содержащее все доступные действия перетаскивания и его отмену.
Параметр ДопустимыеДействия предназначен для передачи приемнику допустимых типов перетаскивания и может принимать также 4, но уже других значения:
- Копирование
- КопированиеИПеремещение
- НеОбрабатывать
- Перемещение
Схема возникновения событий такая. Как только пользователь начал перемещать курсор мыши с зажатой левой или правой кнопкой, возникает событие НачалоПеретаскивания. При входе курсора с по-прежнему зажатой кнопкой в область новой ячейки элемента управления возникает событие ПроверкаПеретаскивания. В зависимости от того, какое значение параметра Действие вернет это событие, изменяется иконка курсора. Когда пользователь наконец освобождает зажатую кнопку мыши, возникает событие Перетаскивание в приемнике и сразу после него ОкончаниеПеретаскивания в источнике.
Как перетаскивать из табличного документа?
Для начала убедитесь, что для нужного поля табличного документа установлен флаг "Разрешить начало перетаскивания". Теперь выделите ОДНУ любую прямоугольную область табличного документа и подведите курсор мыши к ее любой границе так, чтобы курсор принял форму стрелки (обычного указателя). Вот только с этого момента можно перетаскивать.
Основные идеи глобального перетаскивания.
Во-первых, необходимо создать общую форму с маленьким табличным полем и сделать ее окно прикрепляем. Она будет использоваться в качестве кармана, в который и из которого пользователь будет перетаскивать значения из и в различные элементы управления.
Во-вторых, нужно создать глобальные обработчики для нужных типов событий перетаскивания. Желательно также создать соответствующие уницифированные обработчики типов событий для помещения их в модуль нужных форм.
В-третьих, нужно продумать само действие, которое будет выполняться в каждом сочетании типов источника и приемника при каждом действии перетаскивания.
В-червертых, следует придумать, как наиболее эффективно отловить событие ПриОткрытии у как можно большего количества форм конфигурации для установки разрешения начала перетаскивания.
Описание моего примера реализации
1) При открытии каждой формы, элементы которой должны выступать в роли источника перетаскивания, нужно вызывать общую процедуру ЛксПриОткрытииФормы, которая разрешит элементам формы выступать в роли источника перетаскивания. Но это относится только к случаям, когда флажок "Разрешить начало перетаскивания" не установлен хотя бы у одного из нужных элементов управления.
2) В модуль каждой формы, элементы которой должны выступать в роли приемника перетаскивания, следует поместить унифицированные обработчики событий
В событии ПриОткрытии таких форм уже обязательно нужно вызвать ЛксПриОткрытииФормы, которая кроме установки флажка "Разрешить перетаскивание" еще подключит эти обработчики для всех элементов управления формы типа ТабличноеПоле. Поле табличного документа имеет уже упомянутые ограничения, из-за которых пришлось отказаться от использования его в качестве приемника перетаскивания.
3) Перед использованием значение перетаскивания разворачивается в массив ссылок на объекты БД (в дальнейшем - массив перетаскивания). В случае если при разворачивании встречается строка таблицы значений или дерева значений (или табличной части) то она заменяется значением первой найденной колонки из массива ключевых колонок перетаскивания.
4) Если перетаскивание происходит на табличное поле, которое является списком ссылок, то происходит попытка найти в этом списке первый элемент массива перетаскивания, имеющий подходящий тип. Если в приемнике нельзя добавлять строки или не зажата клавиша , то производится попытка поиска по всем ссылочным колонкам значения табличного поля. После обнаружения ссылки курсор в табличном поле устанавливается на найденную строку. Остальные элементы массива перетаскивания игнорируются.
5) Если зажата клавиша и в табличном поле разрешено добавление строк и оно не является списком, то происходит попытка добавить каждый элемент массива перетаскивания в новую строку. Колонка для ключа перетаскивания подбирается по типу. Через дополнительный параметр можно включить проверку уникальности перед добавлением строки.
6) Форма, выполняющая роль кармана, содержит табличное поле вершины кармана, где отражается только одна ссылка, и сворачиваемое табличное поле самого кармана, которое предоставляет доступ к его полному содержимому. Карман представляет собой хранимый персональный для каждого пользователя список ссылок на объекты БД. Перетаскивать можно в и из как самого кармана так и его вершины.
Специальная реализация перетаскивания на типовую форму подбора 1С-ных конфигураций.
Сущность функционала заключается в заполении табличных полей формы подбора таким образом, чтобы они позволили увидеть показатели по ключу перетаскивания будь то ссылка-характеристика или ссылка-номенклатура. Это одно из самых приятных применений перетаскивания в глазах рядовых пользователей. Работать с типовой формой подбора станет на порядок удобнее и быстрее. Используется Книга знаний: v8: Методика переопределения и вызова обработчиков событий формы.
Иногда попадаются сайты с отдельными блоками на странице, которые можно перетаскивать мышью в разные места. Это достаточно интересная и необычная возможность, которая реализуется на JavaScript. И в этой статье я покажу, как делается перетаскиваемый DIV на JavaScript.
Давайте не будем лить воду, а сразу рассмотрим прокомментированный код:
Как видите, это не самый простой код в Вашей жизни, но, тем не менее, его модель абсолютно прозрачна. Вешаем на блок обработчики событий нажатия клавиши мыши и отпускание. Плюс делаем обработку движения мыши, которую отключаем как только отпущена клавиша мыши. В самих же функциях просто смотрим, какие координаты у блока, какие координаты у мыши, и на основании этих данных мы просто перемещаем блок в новое место, меняя свойства top и left.
Вот таким способом делаются перетаскиваемые DIV на JavaScript.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Читайте также: