Intermediate

Перетаскивание элементов

Основы драг-н-дроп

Здесь мы говорим о простом перетаскивании элементов внутри одного компонента, а также между разными компонентами и их экземплярами. Информацию о том, как сделать любой элемент перетаскиваемым ищите в соответствующей статье.

Режимы д-н-д

У всех компонентов, с которыми вы хотите работать должно быть свойство drag (и у источника, и у целевого компонента). В случае с несколькими экземплярами одного компонента можно указать свойство только одному. Для настройки корректной работы д-н-д между разными компонентами изучите эту статью.

У свойства есть несколько значений:

  • drag:true (default) - разрешает перетаскивать элементы внутри компонента, между экземплярами одного компонента, а также между разными компонентами на странице;
  • drag:"source" - разрешает перетаскивать элементы из компонента но не в компонент;
  • drag:"target" - разрешает перетаскивать элементы в компонент, но не из компонента.
  • drag:"order" - разрешает перетаскивать элементы внутри компонента и менять их порядок;
  • drag:"move" - разрешает перетаскивать элементы за пределы узлов;
  • drag:"inner" - упрощённая версия "order". Перетаскиваемый элемент не сохраняет за собой места и может быть перемещён за пределы компонента.

Режим reorder работает только с линейными компонентами, например datatable, list и x-list.

Related sample:  Multi Drag-and-Drop in Tree

Режим multidrag (возможность перетаскивать несколько элементов сразу) активируется через свойство multiselect. Вы можете использовать одну из следующих настроек:

  • multiselect:true - выбор нескольких элементов вне зависимости от иерархии;
  • multiselect:"level" - выбор нескольких элементов одного уровня, внутри одной ветки.

Перемещение нескольких элементов в Treetable

webix.ui({
    view:"treetable",
    // конфиг treetable 
    multiselect:true, 
    drag:true
});

Related sample:  List: Drag-and-Drop of items

Контекст и события Д-н-Д

По своей сути, драг-н-дроп это набор последовательных событий: сначала вы выбираете необходимый элемент, затем перетаскиваете его в нужное место и отпускаете кнопку мыши.

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

  • onBeforeDrag - срабатывает перед тем, как курсор переместили на элемент и нажали левую кнопку мыши;
  • onBeforeDragIn - срабатывает перед тем, как элемент будет перемещён в целевую область;
  • onBeforeDrop - срабатывает, когда элемент перемещён на целевую область;
  • onAfterDrop - срабатывает после того, как элемент перетащили в целевую область;
  • onDragOut - срабатывает, когда элемент перемещён за пределы целевой области.

События используются для контролирования процесса перетаскивания и его настройки на разных этапах, поэтмоу любое событие может вызвать любую функцию, которые вы свяжите с ним.

Такие функции принимают контекст и нативное событие в качестве аргументов.

нативное событие это событие DOM которое срабатывает при перетаскивании, а контекст это объект со следующими свойствами:

  • from - объект источника;
  • to - объект целевого компонента;
  • source - ID перетаскиваемых элементов;
  • target - ID целевой области, null если перемещение происходит в пустую зону;
  • start - ID источника.

Например, событие onBeforeDrop можно использовать для создания копии перемещаемого элемента в момент, когда пользователь отпустил кнопку мыши, при этом не меняя позиции элемента:

view:"datatable",
drag:true,
on:{
    onBeforeDrop:function(context, e){
        this.getItem(context.target).title = context.source.innerHTML; // копирование 
        this.refresh(context.target);
        return false; // блокирует логику события по умолчанию (запрещает "бросать" элемент)
    }
}

Related sample:  Drag-and-Drop from HTML

Читайте подробнее о возможностях событий при перетаскивании элементов.

Драг-н-Дроп: Продвинутый уровень

Наверх