Connection when a node is dropped over another node in Vue Diagram component

16 Mar 20231 minute to read

The connection can be established when a node is dropped over the another node using the diagram DropEvent

Step1

To establish the connection over the dropped node, add connectors in the drop event and assign the source ID and target ID of the connectors to the appropriate nodes.

<template>
    <div id="app">
        <ejs-diagram id="diagram"></ejs-diagram>
    </div>
</template>

//Drop event

export default {
    name: 'app',
    data() {
        return {
        drop: dropEvent,
      }
    },
}

function dropEvent(arg) {
        diagram = diagram = this.$refs.diagram.ej2Instances;
        //Adding conectors and configuring the source and target
        diagram.add({ id: 'connector', sourceID: (args.element).id, targetID: (args.target).id });
        this.dataBind();
    };