How can i move and drag items in a group of Movable?

[AkashTvu]

Environments

• Framework name: Vue js
• Framework version: 2.0
• Moveable Component version: 2.beta.x
• Testable Address(optional):

Description

I have a group movable in which 3 items are added now i want to move goupable items in its group boundary.

[daybrush]

@AkashTvu

It sounds like you are talking about align.

However, it is difficult to provide it in Moveable. It seems that it can be created using .getRect().

I made an Align in the Editor before, but it doesn't work now. https://github.com/daybrush/scena/blob/b41dae29cb95506e3e286fc2b4ec93b036c3dd13/packages/react-editor/src/Editor/Tabs/AlignTab/AlignTab.tsx

if (!moveableRef.moveable) {
    return;
}
const rect = moveable.getRect();

// if moveable is group
const moveables = moveableRef.moveable.moveables;

if (moveables) {
    // Group
    moveables.forEach(child => {
        const target = child.state.target;
        const frame = this.moveableData.getFrame(target);

        if (frame) {
            const subRect = child.getRect();
            // If aligned left
            const delta = rect.left - subRect.left;

            // Move target by delta
            target.style.left += `${parseFloat(target.style.left) + delta}px`;
        }
        return false;
    }).filter(target => target);
}

[jadiagaurang]

@daybrush I plan to introduce a similar feature to align elements within a selected group in my project.

I understand the code you gave in the previous comment. But I would appreciate your help figuring out how to introduce buttons on a group of elements. Can I create a CustomAble, which only shows align buttons for a group, not a single element?

[jadiagaurang]

@daybrush I was able to use the snippet you provide to align elements within a group.

I have question about the frame variable. I don't get the getFrame function. I am not sure why do we need to check that condition.

const frame = this.moveableData.getFrame(target);

if (frame) {
}

[daybrush]

@jadiagaurang

1. align will be explained through a demo. (I have to fix the bug, so it will take about 3 days.)

2. You probably use moveable-helper, but it's unmanaged code.

If you still want to use it, call the following function at onDragStart.

moveableData.setElements(targets);
// or
moveableData.setElements([target]);

[jadiagaurang]

@daybrush I have implemented a ContextMenu to open Alignment Options when there is more than one target to the MoveableRef.

Implemented Example.

https://github.com/daybrush/moveable/assets/430637/2409caba-881c-4676-89ec-728a6d1c8e1a

I need help to align all the elements to the edges. i.e., for the right align option, I want to align to the right edge of the group Rect.

Please help me calculate all six options Vertical (Left, Center, Right) and Horizontal (Top, Center, Bottom), either in Moveable or Helper.

[jadiagaurang]

@daybrush The AlignTab.tsx was very helpful.

I was able to implement getDirectionPos() function in my project and was able to implement all six options successfully. (Left, Center, Right, and Top, Middle, Bottom)

Thanks! 🙏

[daybrush]

@jadiagaurang

• croact-moveable 0.6.1
• @moveable/helper 0.1.3
• lit-moveable 0.27.1
• moveable 0.50.1
• preact-moveable 0.52.1
• react-moveable 0.53.1
• svelte-moveable 0.42.1
• vue-moveable 2.0.0-beta.80
• vue3-moveable 0.25.1
• ngx-moveable 0.47.1

moveable's new version is released. Check it again.

And refer to align demo:

https://daybrush.com/moveable/storybook/index.html?path=/story/request-ables-through-a-method--request-draggable-align

[jadiagaurang]

Hi @daybrush

Thank you for providing the Align Demo. It was beneficial.

I am implementing two more options, Align Horizontally and Align Vertically. This feature would distribute the group rectangle spacing between the selected elements evenly.

Photoshop has two extra Options called Align Horizontally or Vertically (https://helpx.adobe.com/photoshop/using/aligning-layers.html), and Sketch has something similar called Tidy (https://www.sketch.com/docs/designing/layer-basics/aligning-layers/#using-tidy-to-align-layers)

Can you help us with these features in any way? It would be great to add to the demo as well.

[jadiagaurang]

Hi @daybrush, I wanted to follow up on my previous question/request. Can you help us with these features in any way?