Dynamically increase height of container

[Zander1983]

I have an app to allow users to draw polygons on scatter plots and create a tree of plots. e.g.

The problem I have is when a user creates 4 or more plots, they get stacked on top of each other as there is no room, and so I need to allow the user to increase the size of the container by dragging. Heres the problem:

Heres the HTML:

      <div
      >
        <div
          id="workspace-container"
          style={{
            height: 350 + maxTop,
          }}
        >
        Here are the Draggables
        </div>
        <div
          id="dragger-container"
          style={{
            height: "5px",
            backgroundColor: "#333",
          }}
          onMouseDown={(e) => {

          }}
          onMouseMove={(e) => {
            console.log("in mouse move, e.clientY is ", e.clientY);

            let workspaceContainer = document.getElementById(
              "workspace-container"
            );

            // 480 is the original height of dragger-container from the top of the window
            // 355 is the original height of workspace-container            
            let newHeight = e.clientY - 480 + 355;
            workspaceContainer.style.height = newHeight + "px";
          }}
          onMouseUp={(e) => {

          }}
        ></div>
    </div>

When I move the mouse over dragger-container the height of workspace-container is indeed dynamically increased. However I still cannot drag the Draggables down. It seems they dont know the height of the workspace-container has increased.

It may be something to do with the containment option here https://anseki.github.io/plain-draggable/#options-containment. But Im not sure....

[anseki]

Hi @Zander1983, thank you for the comment. Sorry, my English is poor. Do you mean that the draggable element doesn't work correctly after the size of the element was changed? If so, you have to call position method.

[anseki]

[bot] No reply came, then this abandoned issue is closed.

[Zander1983]

Sorry for my late reply - you were correct, that fixed it.

[anseki]

:smile: