Перетаскивание элементов на странице (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

На входе: 

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){


}