Feature request: Free move style

[mga599]

Hello
The dev version based on grapesjs is great but the free position and move style is missed

Can you please tell me how to make it free style move like in https://editor.silex.me/

Thank you

[lexoyo]

Hello Mahmoud

Great that you tried v3 on your own, are you a developer ? What's your use case?

Thank you for the feedback, i'll think about it and i'll need to read about GrapesJS "free move mode", I know it has one but i'm not sure how it handles responsiveness

In silex v2 there is a complex mechanism to allow free move + responsive, but:

• There can be only 1 breakpoint, so only desktop and mobile, no tablet or else
• When the browser window is smaller than the "website width" (the sections width) then it is scaled down to look the same on all screens (in desktop or mobile mode) but this induces a lot of problems, for example the fixed css property does not work at all, i had to program it in javascript and it feels slopy (see the fixed menu on silex.me when the screen is smaller than 1200px)

In general it is best practice in html to use elements in the flow instead of (absolute) positioned / free move. But i'll read about GrapesJS free move feature to understand if it is feasable

In the mean time you can make an element "position: absolute" with the v3 ui, would that be ok for you? You will need to set the top/left values in the properties too, no drag and drop without the real free move feature

[lexoyo]

Also you have to know that in the v3 i plan to integrate admins / cms so that non technical users can edit the content without breaking the design

This is only possible with elements in the flow as you never know the size of the content in advance, everything has to be in the flow

[lexoyo]

This doesn't mean that a free move feature can not be created and optional... Let me think about it 😄

I wonder what is your use case

Have a nice day

[mga599]

Hello,
Thanks for your reply
Yes I am a backend developer, and frontend is very weird to me 😂
After searching there are absolute/designer mode that already exist in grapesjs
GrapesJS/grapesjs#1936

const editor = grapesjs.init({
  // ...
  dragMode: 'absolute', // 'absolute' | 'translate'
 });
// ... or to change via API
editor.setDragMode('absolute');

Have a nice day, Keep working on this nice editor

[lexoyo]

I take a look at grapesjs free move mode and it is very buguy for now... I believe @artf would be glad to have some help on that