Перетаскивание элементов на странице (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
- Коммуникация с пользователем
- Дизайн, стилизация
- Лендинги
- Универсальный API
- Примеры интеграций
- Каталоги
- Навигация
- Документы
- Дополнительные компоненты
- Продвижение, SEO
- Системные моменты
- Системное администрирование
- HOWTO
- Таблицы
- Формы
- Загрузка файлов, картинок
- Работа с SQL
- HOWTO JS
- HOWTO Верстка
- Решение проблем
Falcon Space
Это снижение стоимости владения
за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом
Это быстрое внесение изменений
по ходу эксплуатации программы. Как создается функционал на платформе
Это простой удобный интерфейс
адаптация под мобильные устройства. Про юзабилити платформы