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

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

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

Режимы д-н-д

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

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

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

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

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

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

• Область для перемещения - рассказывает о том, как указать область элемента, за которую можно тащить;
• Маркер целевой области - как добавить сообщение при перетаскивании и отметить целевую область цветом;
• ДнД в компонентах Tree и TreeTable - как соблюдать иерархию при работе с деревом;
• ДнД между разными компонентами - как использовать свойство externalData при перемещении с одного компонента в другой;

• События драг-н-дроп - как пользоваться событиями при перетаскивании (напр., копировать элементы);

• Драг-н-дроп в пределах страницы (Продвинутый уровень) - как сделать Webix компонент или HTML узел перетаскиваемым, а также контролировать каждый аспект перетаскивания;

• HTML5 ДнД с компонентами Webix - как использовать HTML5 драг-н-дроп с библиотекой Webix.

Наверх