OnBound Event

[jadiagaurang]

Environments

• Framework name: Vanilla JS
• Framework version: N/A
• Moveable Component version:
• Testable Address(optional):

Description

I have set up bounds for the container to limit dragging and resizing within a defined area.

bounds = {
    left: 0,
    top: 0,
    right: me.canvasContainerWidth,
    bottom: me.canvasContainerHeight
};

I want to implement a feature when the container grows from the bottom when an element reaches the bottom bound, especially for contentEditable text elements.

[daybrush]

@jadiagaurang

okay. I'll add it in the next version.

[daybrush]

@jadiagaurang

• croact-moveable 0.7.0
• @moveable/helper 0.1.3
• lit-moveable 0.28.0
• moveable 0.51.0
• preact-moveable 0.53.0
• react-moveable 0.54.0
• svelte-moveable 0.43.0
• vue-moveable 2.0.0-beta.82
• vue3-moveable 0.26.0

• ngx-moveable 0.48.0

  moveable's new version is reeased. bound(onBound) event is added.

onBound={e => {
   // { left: false, top: false, right: false, ... }
   console.log(e.bounds, e.innerBounds);
}}

[jadiagaurang]

@daybrush Thanks!

[jadiagaurang]

Hi @daybrush,

I am facing an issue where onBound event doesn't get triggered when an Element is touched to the edges of the bounds using dragTarget, but it gets triggered when dragging an element itself (dragTargetSelf: true)

If an Element touches the bottom bound, I am trying to grow a container.

Here is a video to demo.

https://github.com/daybrush/moveable/assets/430637/53373815-72c5-4cf3-8406-115dbf01929d

I would appreciate any help!

[jadiagaurang]

Hi @daybrush I would like to follow up in my previous comment. Do you know how to trigger onBound Event when an Element is moved using dragTarget?