How to implement a small editor of electrical circuits?

Hello, the point is that there is a working window with the device (picture), which measures various electrical parameters of the cable. To the right of this window, there are items (different brands of cables) of which the scheme is going. These elements need to drag the cursor in the working window and collect the scheme, with the connecting lines (wires) and to monitor the accuracy of its Assembly.
The question is how to implement this drag and drop, a connection of circuit elements and the tracking of the correct Assembly?
Read about Drag'n'drop, but I don't know how to implement the connecting line correctly. Any thoughts to add on the ends of each of the element button and when you click them to make the connection, but I would like just clicking the mouse to cursor to the desired connector of the device and that the cursor followed the wire.
With the implementation of the validation cracks. I think when connecting to assign, for example, the schema element some ID that matches the connector on the device itself and then using a condition to check whether it would be right?
March 19th 20 at 08:56
1 answer
March 19th 20 at 08:58
Solution
You need SVG or Canvas. But to implement this will be difficult. Try to look in the direction of some ready-made solutions for building block diagrams.

As for validation: it seems that your approach is the place to be. I don't know what you have conditions to check the correctness of connections, but in any case, you need some kind of abstraction, to represent your model in the form of some data structure. For example:

// device is your device, input# is the connectors, the arrays contain connected elements.
const device = {
 input1: [],
 input2: [],
...
};
// this is the object which has a list of connections with the permitted elements
const allowedConnnections = {
 input1: ['element1', 'element2'],
 input2: ['element3'],
...
};


So when you add a new element into the connector, you need to check allowed or not

// function must be called each time a new item is added
function checkInput(inputId, elementId) {
 // returns true/false if the element is in the allowed list for the connector
 return allowedConnnections[inputId].indexOf(elementId) !== -1;
}

Find more questions by tags JavaScript