Problem with resizable Div

Hi Guys, I have a resizable and moveable div, made with Javascript.
Now I want to “clone” this div. But the Problem is , I can only resize one div with my Script. How can I fix this?
Here is, what I got so far:
HTML:

<div class="horizbox">
  <div class="textbox">
    <div class="resizer ne"></div>
    <div class="resizer nw"></div>
    <div class="resizer sw"></div>
    <div class="resizer se"></div>
  </div>
<div class="textbox">
    <div class="resizer ne"></div>
    <div class="resizer nw"></div>
    <div class="resizer sw"></div>
    <div class="resizer se"></div>
  </div>
</div>

CSS:

.horizbox {
  float: left;
  width: 50%;
  height: 65%;
  color: black;

  /* demo only */
  height: 120px;
  background: black;
}

.textbox {
  height: 50px;
  width: 50px;
  position: absolute;
  background-color: orange;
}

JAVASCRIPT:

let isResizing = false;
        const elements = document.querySelectorAll(".textbox");
        for (let el of elements) {
            el.addEventListener('mousedown', mouseDown);

            function mouseDown(e) {

                window.addEventListener('mousemove', mouseMove);
                window.addEventListener('mouseup', mouseUp);

                let prevX = e.clientX;
                let prevY = e.clientY;

                function mouseMove(e) {
                    if (!isResizing) {
                        let newX = prevX - e.clientX;
                        let newY = prevY - e.clientY;

                        const rect = el.getBoundingClientRect();
                        const bounds = el.parentElement.getBoundingClientRect();
                        const x = Math.min(
                                Math.max(bounds.left, rect.left - newX), bounds.right - rect.width
                            ),
                            y = Math.min(
                                Math.max(bounds.top, rect.top - newY), bounds.bottom - rect.height
                            );
                        el.style.left = `${x}px`;
                        el.style.top = `${y}px`;
                        prevX = e.clientX;
                        prevY = e.clientY;
                    }
                }

                function mouseUp() {
                    window.removeEventListener('mousemove', mouseMove);
                    window.removeEventListener('mouseup', mouseUp);
                }
            }
        }
        const resizers = document.querySelectorAll(".resizer");
        let currentResizer;
        const element = document.getElementsByClassName('textbox');
        for (index = 0; index < element.length; ++index) {
            var el = element[index];
            for (let resizer of resizers) {
                resizer.addEventListener("mousedown", mouseDown);

                function mouseDown(e) {
                    currentResizer = e.target;
                    isResizing = true;

                    let prevX = e.clientX;
                    let prevY = e.clientY;

                    window.addEventListener("mousemove", mouseMove);
                    window.addEventListener("mouseup", mouseUp);

                    function mouseMove(e) {
                        const rect = el.getBoundingClientRect();

                        if (currentResizer.classList.contains("se")) {
                            el.style.width = rect.width - (prevX - e.clientX) + "px";
                            el.style.height = rect.height - (prevY - e.clientY) + "px";
                        } else if (currentResizer.classList.contains("sw")) {
                            el.style.width = rect.width + (prevX - e.clientX) + "px";
                            el.style.height = rect.height - (prevY - e.clientY) + "px";
                            el.style.left = rect.left - (prevX - e.clientX) + "px";
                        } else if (currentResizer.classList.contains("ne")) {
                            el.style.width = rect.width - (prevX - e.clientX) + "px";
                            el.style.height = rect.height + (prevY - e.clientY) + "px";
                            el.style.top = rect.top - (prevY - e.clientY) + "px";
                        } else {
                            el.style.width = rect.width + (prevX - e.clientX) + "px";
                            el.style.height = rect.height + (prevY - e.clientY) + "px";
                            el.style.top = rect.top - (prevY - e.clientY) + "px";
                            el.style.left = rect.left - (prevX - e.clientX) + "px";
                        }
                        prevX = e.clientX;
                        prevY = e.clientY;
                    }

                    function mouseUp() {
                        window.removeEventListener('mousemove', mouseMove);
                        window.removeEventListener('mouseup', mouseUp);
                        isResizing = false;
                    }
                }
            }
        }

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.