How to deal with multiple 'moveable' in a page

[iCloudys]

Environments

• Framework name:moveable
• Framework version:2.0.0-beta.4
• Moveable Component version:
• Testable Address(optional):

Description

How to deal with multiple 'moveable' in a page, and the 'target' can only be operated in the container

[xinnai]

@iCloudys same question, did you resolve this problem?

[lgh06]

@iCloudys @xinnai I am a newbie struggling on this lib, too.
In my view: You can use one single moveable instance actually,
by dynamically set moveableInstance.target = document.querySelector('.ele2'),
you can use only one moveable instance without multiple instances because one user basically can only edit one element at a time.
doc here: https://daybrush.com/moveable/release/latest/doc/Moveable.html#target .

SO the target prop of moveable is not only readable but also changeable. however if you changed the target, for the previous target's transform state, you have to maintain/store it by yourself, to someplace, by a variable or store.

If you a using React version or other frameworks, just change the ${target} dynamically, which is passed to Moveable, like this: <Moveable target={$target} />

[daybrush]

@iCloudys @xinnai

Specify target as an array or selector string

[iCloudys]

https://user-images.githubusercontent.com/13017318/154915469-bef45e5b-8e76-4a9d-82a3-48a372d646f3.mp4