moveable
moveable copied to clipboard
daybrush
Wrong values for draggable request?
Environments
- Framework name: Vue
- Framework version: 2.6.14
- Moveable Component version: 2.0.0-beta.17
- Testable Address(optional): https://codesandbox.io/s/vue-moveable-demo-forked-j2eyd8?file=/src/App.vue
Description
When requesting { x: 100, y: 100 }, I receive other values in the callback.
I would also like to know the recommended order for requesting changes to moveable (resize,rotate,translate) when initializing a target. I usually do resize,rotate,translate. But on the resize event (if the target is rotate) it also modifies the translate property which messes things up. Maybe you could provide code example on how to initialize a target programmatically?
@GrigoreAlexandru
x and y are the screen reference. Since the target is at 8, 8, if you move to 100, 100 dist can be 92, 92.
Aren't you looking for deltaX or deltaY?
@GrigoreAlexandru
x and y are the screen reference. Since the target is at 8, 8, if you move to 100, 100 dist can be 92, 92.
Aren't you looking for deltaX or deltaY?
What is the difference between these and how do they work? I thought {deltaX: val} meant change x value by val pixels.
How could I initialize moveable with some previously saved values ? Say I have saved the width, height, translate and rotate values in some external state. How can I initialize moveable with those values? I also save the moveable values received in callbacks to the external state. But I want a bidirectional communication, so when the external state changes, moveable is also updated, how can I achieve that?
@GrigoreAlexandru
If your element is at position 8,8 and deltaX, Y is 100, 100, then x, y is 108, 108. If you use x, y 100, 100, it literally moves to 100, 100.
There is no function that automatically changes through state change.
Instead, there is a way to manually call the updateRect() method.
@GrigoreAlexandru x and y are the screen reference. Since the target is at 8, 8, if you move to 100, 100 dist can be 92, 92. Aren't you looking for deltaX or deltaY?
What is the difference between these and how do they work? I thought {deltaX: val} meant change x value by val pixels.
How could I initialize moveable with some previously saved values ? Say I have saved the width, height, translate and rotate values in some external state. How can I initialize moveable with those values? I also save the moveable values received in callbacks to the external state. But I want a bidirectional communication, so when the external state changes, moveable is also updated, how can I achieve that?
were you able to achieve the bidirectional movement ? its exactly my case @GrigoreAlexandru
Hi @ViktorTheFirst, I'm no longer working on that project and I'm not sure on what the final solution was. But my guess is that it was through css and computed values in vue. External state changes, computed value update css, moveable picks up changes and updates. When changes come from moveable however, we calculate the delta of those values (because moveable values could be off by ~1px) and update the state.
That was then, not sure if new updates made this easier.