Trying to drag the left edge of the div....not working

I have created the following JavaScript function.

if (g_strGrabbedBorder == "") means that you are dragging my dynamically created div around with the mouse, and this part of the function works perfectly. It is a global variable set by a mouse left button down handler.

How do you both reposition and resize a div at the same time?

If the left edge moves to the right then the width is being reduced as well as the div moving its position to the right.

Trying to change div.left and div.width causes the div to go haywire.
E.G. I can drag left edge right but the right edge moves right faster such that the div increases its width rather than reduces.

I can't get my head around what is going on. And have run out if ideas as to how to achieve this operation.

So how do you do this?

    function DoOnMouseMove(Event)
    {
        if ((Event.buttons === 1 /* Left mouse button */) && (g_nSelectedDivIndex > -1))
        {       
            const nCurrentLeft = parseInt(g_arrayDynamicDivs[g_nSelectedDivIndex].style.left) || 0,
                    nCurrentRight = parseInt(g_arrayDynamicDivs[g_nSelectedDivIndex].style.right) || 0
                    nCurrentTop = parseInt(g_arrayDynamicDivs[g_nSelectedDivIndex].style.top) || 0,
                    nCurrentBottom = parseInt(g_arrayDynamicDivs[g_nSelectedDivIndex].style.bottom) || 0,
                    nCurrentWidth = g_arrayDynamicDivs[g_nSelectedDivIndex].offsetWidth,
                    nCurrentHeight = g_arrayDynamicDivs[g_nSelectedDivIndex].offsetHeight;

            if (g_strGrabbedBorder == "")
            {
                g_arrayDynamicDivs[g_nSelectedDivIndex].style.left = (nCurrentLeft + Event.movementX) + "px";
                g_arrayDynamicDivs[g_nSelectedDivIndex].style.top = (nCurrentTop + Event.movementY) + "px";
            }
            else if (g_strGrabbedBorder == "left")
            {
                let nNewLeft = nCurrentLeft + Event.movementX;

                if (nNewLeft > nCurrentRight)
                {
                }
                else
                {
                    g_arrayDynamicDivs[g_nSelectedDivIndex].style.left = nNewLeft + "px";
                }
            }
            else if (g_strGrabbedBorder == "right")
            {
                let nNewRight = nCurrentRight + Event.movementX;

                if (nNewRight < nCurrentLeft)
                {
                }
                else
                {
                    g_arrayDynamicDivs[g_nSelectedDivIndex].style.right = nNewRight + "px";
                }
            }
            else if (g_strGrabbedBorder == "top")
            {
                let nNewTop = nCurrentTop + Event.movementY;

                if (nNewTop > nCurrentBottom)
                {
                }
                else
                {
                    g_arrayDynamicDivs[g_nSelectedDivIndex].style.top = nNewTop + "px";
                }
            }
            else if (g_strGrabbedBorder == "bottom")
            {
                let nNewBottom = nCurrentBottom + Event.movementY;

                if (nNewBottom < nCurrentTop)
                {
                }
                else
                {
                    g_arrayDynamicDivs[g_nSelectedDivIndex].style.bottom = nNewBottom + "px";
                }
            }
            Event.preventDefault();
        }
    }