Конфигурация Drag-n-Drop в списках

Механизм перемещения реализован на уровне списков и конфигурируется с помощью следующих опций:

  • itemsDragNDrop — активирует механизм.
  • draggingTemplate — устанавливает шаблон отображения перемещаемой сущности.

Шаблон перемещаемой сущности

В процессе перемещения рядом с курсором отображается миниатюра перемещаемой сущности, для отображения которой используется отдельный шаблон. Шаблон может быть контролом или отдельным wml-файлом. Его содержимое определяет прикладной разработчик.

Пользвательский шаблон перемещения задаётся в опции draggingTemplate в конфигурации списочного контрола. При установке шаблона обязателен вызов базового шаблона Controls/dragnDrop:DraggingTemplate. Базовый шаблон поддерживает параметры, с помощью которых можно изменить отображение элемента.

Схема шаблона:

В случаях использования этого контрола, сущность entity должна наследоваться от Controls/dragnDrop:ItemsEntity.

События перемещения

Прикладному разработчику предоставляются события для работы со списком в процессе перемещения:

  • dragStar — событие начала перемещения; в обработчик события приходит перемещаемая запись; из события нужно вернуть экземпляр Controls/dragnDrop:EntityItems;
  • dragEnd — событие завершения перемещения; в обработчик приходит перемещаемая сущность, цель перемещения и позиция относительно цели перемещения (выше/ниже/внутрь);
  • dragEnter — перемещение элемента в контейнер; в обработчик приходит перемещаемая сущность, позиция перемещения; необходимо, чтобы понять, можно ли в таблицу перемещать определенные сущности;
  • changeDragTarget — срабатывает при смене записи (сущности перемещения), на которую навели; в аргументы приходит сущность, цель перемещения, позиция относительно цели перемещения (выше/ниже/внутрь); из changeDragTarget можно вернуть false, тогда сущность нельзя будет переместить на указанную позицию; может использоваться при запрете перемещения между элементами в дереве.

Пример конфигурации списка с перемещением записей

<Controls.list:View
   on:dragStart="_dragStart()"
   on:dragEnd="_dragEnd()"
   itemsDragNDrop="allow"
   ...
   >
   <ws:draggingTemplate>
      <ws:partial template="Controls/dragnDrop:DraggingTemplate"
         mainText="{{draggingTemplate.entity._options.mainText}}"
         image="{{draggingTemplate.entity._options.image}}"
         additionalText="{{draggingTemplate.entity._options.additionalText}}">
      </ws:partial>
   </ws:draggingTemplate>
</Controls.list:View>