Join the Webstudio community

Updated 2 months ago

Moving Components In the Navigator with Arrows

At a glance

The community member suggests adding keyboard shortcuts to move components up and down the list in the navigator with more precision than dragging with the mouse. The proposed shortcuts are:

CTRL+Arrow up = Move component above adjacent child component
CTRL+Arrow down = Move component below adjacent child component
CTRL+Arrow left = Move up the list to become its own parent
CTRL+Arrow right = Move into child component above

The community member also suggests allowing multiple items to be selected at once during a move, which would make many processes much faster.

In the comments, another community member agrees with the suggestions and provides additional feedback, stating that the selected element should move on the same level within its parent if using a modifier plus arrow up/down, and that using a modifier plus left/right should move the element up a parent level or down into the child of the adjacent component (on that level). They are unsure if a unilateral move up and down regardless of child/parent relationship would be as helpful.

The third community member requests that the suggestions be posted in the related GitHub issue, so that they can be considered during implementation.

Useful resources
Moving selected components up and down the list in the navigator can be finicky at times. It would be nice if we could move components up and down the list with a CTRL+Arrow up or something similar with more precision than dragging with mouse.

CTRL+Arrow up = Move component above adjacent child component
CTRL+Arrow down = Move component below adjacent child component
CTRL+Arrow left = Move up the list to become its own parent
CTRL+Arrow right = Move into child component above

The main issue is when dragging a component up and down the list it is quick to enter the children of adjacent lists without meaning to.

Also, if more than one item could be selected at a time during a move it would make many processes much faster!
Attachment
image.png
J
t
O
3 comments
Hey can you check out this discussion and see if you agree or think it should be done differently? https://github.com/webstudio-is/webstudio/issues/4586
I agree with your comment in that thread. I think the selected element should move on the same level within its parent if some modifier plus arrow up/down. Once you use a modifier plus left/right it should move up a parent level or down into the child of the adjacent component (on that level).

I'm not sure a unilateral move up and down regardless of child/parent relationship is as helpful.
please post it in that issue, so that we see it during implementation
Add a reply
Sign up and join the conversation on Discord