Операции Drag-and-Drop

Библиотека включает расширение outerdrag, которое позволяет создавать новые события путем перетаскивания элементов из внешних компонентов DHTMLX или других планировщиков.

Перетаскивание из внешних компонентов

Когда элемент перетаскивается из внешнего источника в планировщик, планировщик автоматически открывает lightbox для создания нового события.

Вот как работает внешнее drag-and-drop с компонентом dhtmlxTree.

Чтобы интегрировать планировщик с dhtmlxTree, выполните следующие шаги:

Скачайте пакет dhtmlxTree и распакуйте его содержимое в корневую папку вашего приложения.

Добавьте необходимые файлы js и css на страницу:

<script src="../codebase/dhtmlxscheduler.js" ...></script>
<link rel="stylesheet" href="../codebase/dhtmlxscheduler.css" ...>
...

Активируйте расширение outerdrag:

scheduler.plugins({
    outerdrag: true
});

Инициализируйте компонент dhtmlxTree (инструкции здесь):

var tree = new dhtmlXTreeObject("treebox", "100%", "100%", 0);
tree.setImagePath("../common/dhtmlxTree/imgs/csh_yellowbooks/");
tree.loadXML("./data/tree.xml");

Включите drag-and-drop в компоненте dhtmlxTree (инструкции здесь):
```
tree.enableDragAndDrop(true);
```

Инициализируйте и настройте планировщик:

...
scheduler.init('scheduler_here', new Date(2019, 5, 30), "timeline");

Добавьте обработчик события onExternalDragIn, чтобы определить, как текст перетаскиваемого элемента будет присвоен событию:

scheduler.attachEvent("onExternalDragIn", function(id, source, event){
    var label = tree.getItemText(tree._dragged[0].id);
    scheduler.getEvent(id).text = label;
    return true;
});

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

Перетаскивание между планировщиками

Эта функция доступна только для лицензий Commercial (с 6 октября 2021), Enterprise и Ultimate.

При отображении нескольких планировщиков на странице можно включить drag-and-drop между ними, что позволяет перемещать события из одного планировщика в другой без лишних действий.

Чтобы включить поддержку drag-and-drop между планировщиками, подключите расширение "drag_between":

Включение поддержки drag-and-drop для нескольких планировщиков

<script src="codebase/dhtmlxscheduler.js"></script>
<link rel="stylesheet" href="codebase/dhtmlxscheduler.css" type="text/css">
 
<script>scheduler.plugins({
    drag_between: true
});
 
scheduler.init('scheduler_here',new Date(2019, 5, 30),"week");
scheduler.load("./data/units.xml");
 
scheduler2 = Scheduler.getSchedulerInstance();
scheduler2.init('scheduler_here_2',new Date(2019, 5, 30),"week");
</script>

Пример можно найти в файле "samples/20_multiple/06_drag_between_layout.html", входящем в пакет Scheduler PRO.

Ограничение перетаскивания событий из/в планировщик

Чтобы запретить перетаскивание событий из планировщика, установите свойство drag_out в false:

scheduler.config.drag_out = false; // запретить перетаскивание событий из этого планировщика scheduler.init('scheduler_here',new Date(2019, 5,30),"week");
scheduler.load("./data/units.xml");
 
scheduler2 = Scheduler.getSchedulerInstance();
scheduler2.init('scheduler_here_2',new Date(2019, 5, 30),"week");

Чтобы запретить перетаскивание событий в планировщик, установите свойство drag_in в false:

scheduler.init('scheduler_here',new Date(2019, 5, 30),"week");
scheduler.load("./data/units.xml");
 
scheduler2.config.drag_in = false; // запретить перетаскивание событий в этот планировщик scheduler2 = Scheduler.getSchedulerInstance();
scheduler2.init('scheduler_here_2',new Date(2019, 5, 30),"week");

Пример "samples/20_multiple/06_drag_between_layout.html" доступен в пакете Scheduler PRO.

События перетаскивания

onBeforeEventDragOut — вызывается перед тем, как событие будет перетащено из планировщика
onEventDragOut — вызывается, когда событие перетаскивается из планировщика
onBeforeEventDragIn — вызывается перед тем, как перетаскиваемое событие попадет в планировщик
onEventDragIn — вызывается, когда перетаскиваемое событие перемещается по планировщику
onEventDropOut — вызывается, когда перетаскиваемое событие сбрасывается за пределами области планировщика

Наверх