When creating a topology builder (or any type of graph/layout that is based on a group of nodes that are drawn on one canvas), one of the most common operations will be to drag a node from a list of building blocks and drop it onto that canvas.

We can drop a node on to the canvas itself and it will be drawn based on the dropped [x,y] position, or we can drop it in a specific drop point, or even inside another node.

I have implemented such a system a few times in the past, and it always came to a point where I needed the building blocks (list of nodes that I drag into the canvas) to be regular HTML nodes and not SVG. The main reason was that I wanted them to be a part of the app framework and be able to interact with the app itself. For example, They are generated from some list I already have in my models, there are some more operations on the nodes (like settings\edit) or they need to behave like DOM behaves (for example, change of layout because of screen-size or listen to some DOM events), etc.

Defining drag and drop relation in SVG is pretty straight forward, and defining drag and drop relation in HTML is pretty simple as well. However, combining the two is a bit tricky.

I will demonstrate how to implement this using React and D3, and I assume that you are somewhat familiar with them both.

#javascript #d3js #drag-and-drop #svg #react