Drag And Drop Feature In React

I am using React. I have to make draggable text field which can be resized and edited also. I have done this by using a draggable library and surrounding my text field with draggable component. So, this text field can be moved by user anywhere on the screen and he can edit it. This is similar to how we write text on ppts.

Now i want to also save this location of textfield on the screen in database, so that when user comes back to the webpage again, the textfield is displayed on its previous location with the entered details. I though of using x and y coordinates, but it will change with screen sizes, so i dont think it is efficient.

Is their any other way, like storing the DOM, or what concept is used by powerpoints to do this? I am using mongodb as database and nodejs as backend language.

Later on, i want to add additional features like, drag and drop image component, so that user can put images in it, add drag and drop buttons. Any idea will be highly appreciated.



A possible solution to the problem could be that you store the x- and y-coordinates relative to a base size, e.g. 1920x1080, and then calculate which x- and y-coordinates should be displayed relative to the base size that you already set.


let x = viewportWidth / baseWidth * dbX;
let y = viewportHeight / baseHeight * dbY;