How do I contain moveable element within container?

[micobarac]

Environments

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 15.0.0-rc.4
Node: 16.17.1
Package Manager: yarn 1.22.19
OS: darwin arm64

Angular: 15.0.0-rc.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.0-rc.4
@angular-devkit/build-angular   15.0.0-rc.4
@angular-devkit/core            15.0.0-rc.4
@angular-devkit/schematics      15.0.0-rc.4
@angular/cdk                    15.0.0-rc.3
@schematics/angular             15.0.0-rc.4
rxjs                            7.5.7
typescript                      4.8.4

"ngx-moveable": "^0.36.0",
"ngx-selecto": "^1.20.2"

Description

I would like to know how to contain moveable element within container. I have tried setting [snappable]="true" and snapContainer=".selecto-area", but it doesn't work.

When I resize or drag an element, it is restricted to body element only.

I have searched all the examples, but I haven't found a way to do it in Angular.

[daybrush]

@micobarac
Can you figure out the structure of the element?

I want to know about demos and usage examples.