Drag-and-Drop-Operationen (legacy)

Warnung

Dieser Artikel beschreibt eine veraltete Integration. Wenn Sie neu anfangen, sehen Sie sich die Framework-Integrationen oder das Vanilla-JS-Setup an.

Die Bibliothek bietet die outerdrag-Erweiterung, mit der neue Termine erstellt werden können, indem Elemente aus externen DHTMLX-Komponenten oder anderen Scheduler-Instanzen gezogen werden.

Drag-and-Drop von externen Komponenten

Sobald der Benutzer ein externes Element auf den Scheduler zieht, öffnet der Scheduler das Lightbox-Fenster zur Erstellung eines neuen Termins.

Integration mit dhtmlxTree

Betrachten wir externes Drag-and-Drop im Kontext der dhtmlxTree-Komponente.

Folgen Sie diesen Schritten, um den Scheduler mit der dhtmlxTree zu integrieren:

1. Laden Sie das dhtmlxTree-Paket herunter und entpacken Sie dessen Inhalt in den [YOUR APPLICATION ROOT]-Ordner
2. Binden Sie die notwendigen JS- und CSS-Dateien auf der Seite ein:

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

3. Aktivieren Sie die outerdrag-Erweiterung auf der Seite:

scheduler.plugins({
    outerdrag: true
});

4. Initialisieren Sie die dhtmlxTree-Komponente (siehe Anweisungen hier) :

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

5. Aktivieren Sie Drag-and-Drop in der dhtmlxTree-Komponente (siehe Anweisungen hier) :

tree.enableDragAndDrop(true);

6. Scheduler initialisieren und konfigurieren:

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

7. Fügen Sie einen Handler dem onExternalDragIn-Ereignis hinzu, um festzulegen, wie der Text des gezogenen Elements in eine Eigenschaft des Termins konvertiert wird:

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

Integration mit dhtmlxTree

Jetzt können Sie ganz einfach neue Termine erstellen, die Baumdaten enthalten – einfach den gewünschten Knoten per Drag-and-Drop ziehen.