Перетаскивание элементов на странице (Drag-and-Drop)
Описание компонента Drag-and-Drop
Система позволяет сделать некие элементы на страницы перетаскиваемыми (draggable), а другие элементы могут принимать эти элементы (droppable).
Результат перемещения и реакцию системы можно заложить через хранимую процедуру falcon_dragDrop.
Пример работы компонент в демостенде.
Примечание. Не работает на мобильных устройствах Android. Подробнее о поддержке: https://developer.mozilla.org/en-US/docs/Web/API/Document/dragenter_event
Возможные применения Drag-and-Drop
- изменение статусов элементов,
- сортировка элементов по группам/категориям,
- удаление элемента через перетаскивание на корзину,
- назначение элементам признаков,
- установка некоего поля через перетаскивание на объект.
Как создать механизм перетаскивания объекта
1. Определяем разметку с классами as-droppable и as-draggable
2. Описываем логику сохранения состояния в процедуре falcon_dragDrop.
Создание разметки для Drag-and-Drop
<div class="as-droppable" data-code="cat" data-itemid="1">
<a href="#" class="btn btn-primary btn-xs as-draggable" draggable="true" title="Простое перетаскивание элемента" data-onedrop="0" data-copy="0" data-code="moveType" data-itemid="10">Перемести меня</a>
</div>
<div class="as-droppable" data-code="cat" data-itemid="2">
</div>
Элементы as-droppable являются контейнерами, куда можно класть элементы as-draggable.
У as-droppable и as-draggable мы указываем параметры data-code и data-itemID, которые затем поступают в процедуру falcon_dragDrop для обработки факта переноса элемента.
Дополнительные поля для as-draggable:
- data-oneDrop - если 1, то элемент можно будет перенести только 1 раз на странице.
- data-copy - если 1, то элемент копируется, а не переносится (в общем случае режим копирования лучше устанавливать через процедуру dragDrop)
- data-target - если указан jquery селектор, то элемент можно будет положить только в контейнер as-droppable подходящим под данный селектор
Реализация хранимой процедуры falcon_dragDrop
Процедура выполняется в момент отпускания элемента draggable в контейнер (элемент droppable)
Пример процедуры:
create PROCEDURE [dbo].[falcon_dragDrop]
@parameters ExtendedDictionaryParameter readonly,
@username nvarchar(256)
AS
BEGIN
declare @elementItemID int, @elementCode nvarchar(128),
@containerItemID int, @containerCode nvarchar(128)
select @elementItemID = try_cast(Value2 as int)
from @parameters where lower([Key])='elementitemid'
select @elementCode= Value2
from @parameters where lower([Key])='elementcode'
select @containerItemID = try_cast(Value2 as int)
from @parameters where lower([Key])='containeritemid'
select @containerCode = Value2
from @parameters where lower([Key])='containercode'
declare @actionType nvarchar(128) = case
when @elementCode= 'copyType' then 'copy'
when @elementCode= 'moveType' then 'move'
when @elementCode= 'deleteType' then 'delete'
when @elementCode= 'backType' then 'back'
end
exec as_print @str=@elementCode
-- SELECT 1
select 1 Result, iif(@elementCode='moveAlert' , 'OK!', '') Msg,
'fa-cogs' icon, 'body' RefreshContainer,
@actionType [action] -- move, back, delete, copy
-- SELECT 2 Outer commands
END
На входе:
- username - текущий пользователь
- parameters - коллекция, где переданные параметры elementCode, elementItemID, containerCode, containerItemID - те параметры, которые мы указали в разметке для as-draggable и as-droppable элементов страницы.
На выходе:
SELECT 1 Задает результат:
- msg. Если задан, то выводится alert.
- result - если 1, то операция успешно выполнена
- icon - иконка для alert окна
- refreshContainer - если задан, то обновляет компоненты в области страницы, заданной в виде селектора в этом поле.
- replaceContainer и replaceContainerHtml - вставляем разметку HTML в некотором контейнере на странице (по селектору jQuery).s
- action - результат выполнения операции
- move - простое перемещение объекта (по умолчанию)
- copy - исходный объект копируется
- delete - перемещаемый объект удаляется со страницы
- back - перемещаемый объект остается на прежнем месте
SELECT 2 Позволяет выполнить Внешние действия.
Примечание: Вы можете обработать через коллбек в JS момент событие после вызова процедуры saveDrop:
as.dragdropcallbacks["saveDrop"] = function(data, el, container){
}
Google поиск по нашей документации
- Руководства
- Основа Falcon Space
- Основные компоненты
- Возможности Локализация сайта. Перевод интерфейса сайта на языки Геолокация, определение местоположения пользователя на карте Безопасность данных сайта и разграничение доступа Адаптивные PWA приложения с установкой значка на экран телефона. Отправка push уведомлений Перетаскивание элементов на странице (Drag-and-Drop) Копирование текста в буфер обмена Удаленное подключение к внешним базам данных из личного кабинета - MySQL, PostgreSQL Загрузка данных из Excel с произвольным форматом
- Коммуникация с пользователем
- Дизайн, стилизация, юзабилити
- Лендинги
- Универсальный API
- Примеры интеграций
- Каталоги
- Навигация
- Документы
- Дополнительные компоненты
- Продвижение, SEO
- Системные моменты
- Системное администрирование
- HOWTO
- Таблицы
- Формы
- Загрузка файлов, картинок
- Работа с SQL
- HOWTO JS
- HOWTO Верстка
- Решение проблем
Выгода от использования Falcon Space
В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
- Шаг 1. Создать концепт проекта
- Шаг 2. Получить оценку бюджета (КП)
- Шаг 3. Заключить договор
- Шаг 4. Создать совместно техническое задание
- Шаг 5. Поэтапная реализация проекта