I'm trying to implement drag and drop guidelines

example image

I have an array with objects, and with a for loop and Recursive Component in react which display the data.

JSON example:

[
    {
        "height": "100",
        "width": "100",
        "left": "0",
        "top": "0",
        "children":[
            {
                "height": "100",
                "width": "200",
                "left": "50",
                "top": "60"
            }
        ]
    },
    {
        "height": "100",
        "width": "200",
        "left": "20",
        "top": "30"
    }
]

when the user drags an element, I want to show some guidelines based on other draggable objects which are present in the view.

I have an idea to use an event listener and every time the mouse position changes when the user drags an element, check every draggable object and then display guides, but this is not an optimized way to do this.

any idea how to solve this challenge?