Drag and drop nodes and connect nodes with mouse

[wanderernxa]

Hi, Thank you for the fantastic tool. Is it possible to do drag and drop of nodes from a pallette and then draw the connections(edge) between them? Like Visio for example?

thanks

[dash14]

Hi @wanderernxa, I apologize that it has been quite some time since you asked that question. It may not be useful anymore, but I have created a example and share it below.

https://codesandbox.io/p/sandbox/v-network-graph-make-link-by-drag-6m2tfv?file=%2Fsrc%2FApp.vue%3A1%2C1

https://github.com/dash14/v-network-graph/assets/24878247/4ebb799f-d7f8-4362-8cf8-9e82eae62fd6

It uses the layer feature, specifying raw event handlers for nodes, and the coordinate transformation feature. See the examples below for more details on each of these features.

• https://dash14.github.io/v-network-graph/examples/layers.html
• https://dash14.github.io/v-network-graph/examples/misc.html#coordinates-translation
• https://dash14.github.io/v-network-graph/examples/event.html#set-raw-event-handlers-to-the-node-elements

I am not familiar with Visio so this may not be the behavior you expect. Sorry if that is the case. Best regards.

[wanderernxa]

This is perfect, thank you so much!

[piliadis]

Hello there! Thanks for your work @dash14 ! We all appreciate it! I was trying to create a graph where the user can drag and drop nodes, and also link them according to the above examples. I was getting a nasty bug: the drag and drop functionality was working perfectly, until the first edge be drawn. Then the dropped nodes were placed in the center (default behaviour). I tried to replicate the error in a sandbox, but i failed as it works as expected: sandbox <- select the open in a new tab in the upper right corner Fortunately I found the solution and I'm noting it here to help someone else. The solution is to avoid using reactive layouts and instead use simple ref. Then all works perfect! Cheers!