Перетаскивание элементов на странице (Drag-n-Drop)

Описание компонента Drag-n-Drop

Система позволяет сделать некие элементы на страницы перетаскиваемыми (draggable), а другие элементы могут принимать эти элементы (droppable).

Результат перемещения и реакцию системы можно заложить через хранимую процедуру falcon_dragDrop. 

Пример работы компонент в демостенде

Примечание. Не работает на мобильных устройствах Android. Подробнее о поддержке: https://developer.mozilla.org/en-US/docs/Web/API/Document/dragenter_event

Возможные применения Drag-n-Drop

  • изменение статусов элементов,
  • сортировка элементов по группам/категориям,
  • удаление элемента через перетаскивание на корзину,
  • назначение элементам признаков,
  • установка некоего поля через перетаскивание на объект.

Как создать механизм перетаскивания объекта

1. Определяем разметку с классами as-droppable и as-draggable

2. Описываем логику сохранения состояния в процедуре falcon_dragDrop. 

Создание разметки для Drag-n-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

На входе: 

  1. username - текущий пользователь
  2. parameters - коллекция, где переданные параметры elementCode, elementItemID, containerCode, containerItemID - те параметры, которые мы указали в разметке для as-draggable и as-droppable элементов страницы.

На выходе: 

SELECT 1 Задает результат:

  1. msg. Если задан, то выводится alert.
  2. result - если 1, то операция успешно выполнена
  3. icon - иконка для alert окна
  4. refreshContainer - если задан, то обновляет компоненты в области страницы, заданной в виде селектора в этом поле. 
  5. action - результат выполнения операции 
    1. move - простое перемещение объекта (по умолчанию)
    2. copy - исходный объект копируется 
    3. delete - перемещаемый объект удаляется со страницы
    4. back - перемещаемый объект остается на прежнем месте 

SELECT 2 Позволяет выполнить Внешние действия. 

Falcon Space - функциальная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space

SQL-инструмент для создания личных кабинетов на сайте

Суть подхода и история создания Falcon Space

Платформа Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки

Это быстрое внесение изменений

по ходу эксплуатации программы

Это современный интерфейс

полная адаптация под мобильные устройства

Веб-приложения на MS SQL. Партнерская программа для разработчиков и веб-студий

Вы можете разрабатывать самостоятельно или сотрудничать с нами в плане веб-разработки на платформе Falcon Space, используя только SQL и HTML.
Смотреть примеры с кодом SQL
Документация по платформе

Google поиск по нашей документации