Search results

How to establish the connection to when the node dropped hover another node

14 Oct 2021 / 1 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.

Copied to clipboard
<template>
    <div id="app">
        <ejs-diagram id="diagram"></ejs-diagram>
    </div>
</template>
Copied to clipboard
//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();
    };