Is it possible to drag absolutely positioned elements and resize them from the edges?

[lucasnjsilva]

Is it possible to define an element (like a slot, button, etc.) with absolute positioning and be able to drag it on the canvas and resize it by its edges. Currently, dragging works only hierarchically.

I understand that it’s already possible to set x, y, width, and height numerically via an input, but I’m looking for a more interactive approach, where the element can be moved and resized directly on the canvas. If an element has position: absolute, it could support this interactive dragging/resizing; if not, it would continue to behave as it currently does.

Example:

[FedericoBonel]

I responded to this in the discord server, but I'll leave it here just in case anyone hits this in the future (link):

Hey @lucasnathan! This is not supported out of the box, but the new registerOverlayPortal function should let you implement it. You can cut the overlay around your absolutely positioned component in the canvas and handle drag and drop or resizing as needed, updating x, y, width, and height in the background when the user drags your specific handles.
I believe you could maybe wrap this in a custom fieldType, and then use fieldTransforms to keep that logic centralized in the editor. But if that proves to be too cumbersome, you could handle it in your component’s render function using the PuckAPI to update the values. If you do it in the render function, access the PuckAPI conditionally (only when puck.isEditing is true), since it is not available in the Render component.