Перетаскивание элементов на странице (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. replaceContainer и replaceContainerHtml - вставляем разметку HTML в некотором контейнера на странице (по селектору jQuery).s
  6. action - результат выполнения операции 
    1. move - простое перемещение объекта (по умолчанию)
    2. copy - исходный объект копируется 
    3. delete - перемещаемый объект удаляется со страницы
    4. back - перемещаемый объект остается на прежнем месте 

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

Примечание: Вы можете обработать через коллбек в JS момент событие после вызова процедуры saveDrop: 

as.dragdropcallbacks["saveDrop"] = function(data, el, container){


}

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

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

Falcon Space

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

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

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

по ходу эксплуатации программы. Как создается функционал на платформе

Это простой удобный интерфейс

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