Операции перетаскивания (устаревшее)

warning

Эта статья описывает устаревшую интеграцию. Если вы начинаете с нуля, см. интеграции с фреймворками или настройку на vanilla JS.

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

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

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

Интеграция с dhtmlxTree

Давайте рассмотрим внешнюю перетаскивание в контексте компонента dhtmlxTree.

Следуйте этим шагам, чтобы интегрировать планировщик с dhtmlxTree:

1. Скачать пакет dhtmlxTree и распаковать его содержимое в папку [YOUR APPLICATION ROOT]
2. Включите необходимые js и css файлы на страницу:

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

3. Активируйте расширение [outerdrag] на странице:

scheduler.plugins({
    outerdrag: true
});

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

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

5. Включите перетаскивание в компоненте dhtmlxTree (см. инструкции здесь) :

tree.enableDragAndDrop(true);

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

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

7. Назначьте обработчик на событие onExternalDragIn, чтобы определить, как текст перетаскиваемого элемента будет преобразован в свойство события:

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

Интеграция с dhtmlxTree

Теперь вы можете легко создавать новые события, содержащие данные дерева — просто перетащите нужный узел.