After the container size is changed, how can the elements dragged to the boundary be re-calculated according to the easy relative size?

[isszz]

Environments

• Framework name: VUE3
• Framework version: 3.3.4
• Moveable Component version: vue3-moveable = 0.26.1 moveable = 0.51.1
• Testable Address(optional):

Description

After the container size is changed, how can the elements dragged to the boundary be re-calculated according to the easy relative size? Tried useResizeObserver = true and moveableRef. Value. UpdateRect () have no effect

[jadiagaurang]

Hi @isszz,

You should calculate the container height and width again and update the bounds property to the Moveable Ref!

Read More at https://daybrush.com/moveable/release/latest/doc/Moveable.Snappable.html#bounds

Vanilla JS Example using jQuery

var $container = $(".container");  // jQuery Ref of the Container
var containerWidth = $container.outerWidth(true);  // https://api.jquery.com/outerWidth/
var containerHeight = $container.outerHeight(true);  //  https://api.jquery.com/outerHeight/

MoveableRef.bounds = {
    left: 0,
    top: 0,
    right: containerWidth,
    bottom: containerHeight
};

[isszz]

Hi @isszz,

You should calculate the container height and width again and update the bounds property to the Moveable Ref!

Read More at https://daybrush.com/moveable/release/latest/doc/Moveable.Snappable.html#bounds

Vanilla JS Example using jQuery

var $container = $(".container");  // jQuery Ref of the Container
var containerWidth = $container.outerWidth(true);  // https://api.jquery.com/outerWidth/
var containerHeight = $container.outerHeight(true);  //  https://api.jquery.com/outerHeight/

MoveableRef.bounds = {
    left: 0,
    top: 0,
    right: containerWidth,
    bottom: containerHeight
};

Thank you for your reply;

The problem now is that the element that is dragged to the boundary after the container changes size cannot always remain in the visible area based on the container size change; According to your code container, the size limit of the drag area is updated, but the position of the drag element cannot be updated. What should I do about this, thank you very much

Test video: https://github.com/daybrush/moveable/assets/2878463/bdca97e7-2558-48a7-bb10-24560f79b8b3