Open rasfront opened 1 year ago
@Raserad
It is probably related to this issue and will be reflected in the next update.
(It will take some time.)
@Raserad
This is probably the first time it will be offered.
persistData can be known through moveable.getRect() information.
I'll update this saturday.
<Moveable
// target={".target"}
draggable={true}
resizable={true}
rotatable={true}
viewContainer={document.body}
persistData={{
left: 67.6202,
top: 110.6202,
offsetHeight: 100,
offsetWidth: 100,
origin: [130, 173],
pos1: [96.7019, 110.6202],
pos2: [192.3798, 139.7019],
pos3: [67.6202, 206.2981],
pos4: [163.2981, 235.3798],
}}
onRender={e => {
e.target.style.cssText += e.cssText;
console.log(e.moveable.getRect());
}}
/>
@Raserad
@moveable/helper
0.0.4lit-moveable
0.15.0moveable
0.38.0preact-moveable
0.40.0react-compat-moveable
0.26.0react-moveable
0.41.0svelte-moveable
0.30.0vue-moveable
2.0.0-beta.46vue3-moveable
0.13.0ngx-moveable
0.35.0moveable's new version is released.
Use moveable.getRect()
method (save) and persistData
prop (restore) .
@daybrush thank you for this function. But in some cases there are groups selected. Can you provide method to restore group rects? I mean add "children" field inside persist data.
@Raserad
I will support But it takes a little time.
@Raserad
@moveable/helper
0.0.4lit-moveable
0.16.0moveable
0.39.0preact-moveable
0.41.0react-compat-moveable
0.27.0react-moveable
0.42.0svelte-moveable
0.31.0vue-moveable
2.0.0-beta.48vue3-moveable
0.14.0ngx-moveable
0.36.0moveable's new version is released. children is added. Supported group too.
Not work with Vue.js
@AkashTvu
How did you use it?
Vue3 is not working, the handles are outside the bounds? The overlay itself is correct, but is done with the css matrix3d()
transform. I use Moveable in a modal. (floating scrollable div)
<Moveable
ref="moveable"
className="moveable"
v-bind:target="['.target']"
v-bind:warpable="true"
:renderDirections="['n', 'nw', 'ne', 's', 'se', 'sw', 'e', 'w']"
:persistData="moveableRect"
@warp="onWarp"
@warpStart="onWarpStart"
@warpEnd="onWarpEnd"
/>
moveableRect:
{
"width": 703.999997981556,
"height": 599.8437525828197,
"left": 155.9999651530767,
"top": 143.00013366597412,
"pos1": [155.9999651530767, 143.00013366597412],
"pos2": [858.9999926163259, 146.00018318832292],
"pos3": [160.00003285036928, 742.8438862487938],
"pos4": [859.9999631346327, 741.8438420333597],
"offsetWidth": 961,
"offsetHeight": 822.844,
"beforeOrigin": [509.92481, 444.05931999999996],
"origin": [509.92481, 444.05931999999996],
"transformOrigin": [480.5, 411.422],
"rotation": 0.2445080025559874
}
@bytebrain
Is there any way to test it? (codesandbox, repository)
I need elements with the same structure (target to body, with moveable location) as the problem.
@daybrush Never mind, the issue is caused by something else in my project. I've made a clean codesandbox, and that is working fine like designed.
https://codesandbox.io/s/quirky-mendel-ykv25f?file=/src/components/MoveableDialog.vue
In my project the css class target
was already used somewhere. I've reamed the Moveable target class tomy-overlay-target
and the issue was fixed.
Sorry about that...
I have ability to remember moveable positions. After that i wanna to restore this positions on next time when i select. How can i restore positions (rect points, width, height, etc) @daybrush