Bounds in container doesn't seem to apply

[bubbleheadinc]

Hi, I'm starting to play with Vue Moveable and I'm trying to get the moveable to stay inside its container. I've set, draggable, dragArea, and snappable to the demo sandbox according to the docs. I have added a :container="$refs.container" to specify the container and set styles on the container and then try to set bounds.

The object can still be moved outside the container and the bounds seem to only apply to the document body and not the container. Shouldn't the bounds apply to the reference container or am I misunderstanding how this should work?

Here is a CodeSandbox with the issue. If the container is set, shouldn't the bounds apply to the container so that the moveable should be kept within the green box container?

Thank you for any help!

[liveclickermike]

I'm also having this issue.. I have a hacky workaround of measuring the top/left of the container and manually setting bounds equal to the container bounding box, but this doesn't work if the page changes in layout above the container (and throws the position of the container off from initial page load)

Any help would be greatly appreciated!

[josvos]

AFAICS, the container prop expects a HTMLElement, not a Vue component that $refs.xxx is. BUT: I do not manage to pass such an element (as a quick test I did this with document.querySelector), because then I get [Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded". According to https://www.gitmemory.com/issue/probil/vue-moveable/27/543120459 this is due to the way vue-moveable handles its props.

Any suggestions on how to pass something useful to the container prop, as I really need to restrict the frame to one part of my page.

[JohannesSchwegler]

@josvos @liveclickermike rollback to a older version is a workaround for now, (https://codesandbox.io/s/vue-material-also-works-on-the-right-side-dgn27?file=/package.json:256-261)

[josvos]

FWIW: I use a local copy now, in which I added a prop containerSelector (string) and in mounted() I do containerElement = document.querySelector(this.containerSelector). That containerElement is then used as first parameter for the Moveable() constructor.