Why does the box not move freely despite using cdkDrag and cdkDragBoundary? - html

Question

I am using "Drag and Drop" angular material.
https://material.angular.io/cdk/drag-drop/overview
When I create it with an external component as a child to the cdkDrag section it will only move up and down.
However, if I remove the boundary it will move freely.
Or, if I keep the boundary and have a generic div as a child to the cdkDrag section, then it will move freely within the boundary.
It seems the cdkDragBoundary does not like components inside. Does anyone know if this is just incompatible or am I doing something wrong?
Tabletop-creator-pagestructure
<main>
<div class="example-boundary">
<!--Creation field and actual placable objects-->
<div cdkDrag cdkDragBoundary=".example-boundary">
<!--This component being present along with the cdkDragBoundary causes problem-->
<app-tabletop-creator-placeable ></app-tabletop-creator-placeable>
</div>
</div>
</main>
.example-boundary {
position: absolute;
left: 300px;
top: 200px;
height: 600px;
width: 600px;
background: rgba(128, 128, 128, 0.351);
border: solid 3px rgb(255, 0, 0);
}
import { Component, OnInit} from '#angular/core';
import { navDataCard } from './nav-data-card';
import { CdkDragDrop} from '#angular/cdk/drag-drop';
#Component({
selector: 'app-tabletop-creator-pagestructure',
templateUrl: './tabletop-creator-pagestructure.component.html',
styleUrls: ['./tabletop-creator-pagestructure.component.scss']
})
export class TabletopCreatorPagestructureComponent implements OnInit {
data = navDataCard;
masterPlacableList = [];
topPlaceableList = ["test 1", "test 2", "test 3"];
constructor(){}
ngOnInit(){ }
}
tabletop-creator-placeable
<div class="example-placable" >
</div>
.example-placable {
width: 200px;
height: 200px;
border: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
cursor: move;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
background: #fff;
border-radius: 4px;
margin-right: 25px;
position: absolute;
z-index: 1;
padding: 10px;
transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.example-box.free-dragging {
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
import { Component, OnInit} from '#angular/core';
#Component({
selector: 'app-tabletop-creator-placeable',
templateUrl: './tabletop-creator-placeable.component.html',
styleUrls: ['./tabletop-creator-placeable.component.css']
})
export class TabletopCreatorPlaceableComponent implements OnInit {
constructor(){
}
ngOnInit(): void {
}
}

Answer 1

The "cdkDrag" and "cdkDragBoundary" must be on the component selector.
<main>
<div class="example-boundary">
<!--Creation field and actual placable objects-->
<app-tabletop-creator-placeable cdkDrag cdkDragBoundary=".example-boundary">
</app-tabletop-creator-placeable>
</div>
</main>