Menu
Using @angular/cdk 7.2.1: If defining a parent component holding a cdkDropList and a nested list of cdkDrag components, defining a cdkDragHandle inside the nested child component doesn't work. If the same structure is all in the same component, cdkDragHandle works perfectly.
https://stackblitz.com/edit/angular-wfvmuj?embed=1&file=src/app/hello.component.html
Has anyone found a fix to get cdkDragHandle to work even when not defined in the same component as cdkDrag?
490
Without importing/registering DragDropModule in the NgModule imports, cdkDrag or similar directives will simply not work. Here is an updated example with at least the module imported and dragging/dropping working at a basic level. stackblitz.com/edit/angular-drax4a Thanks @AlexanderStaroselsky, that was spot on.
How can I set a cdkDragBoundary in a child component with a class declared in the parent component? Add an input to your child component and pass mastercontainer to it. Use that field as the cdkDragBoundary. I've tried that before.
You can associate some arbitrary data with both cdkDrag and cdk-drop by setting cdkDragData or data. In our case, the event data property refers to the corresponding items array.
The cdkDrag also exposes the following outputs: cdkDragStarted, cdkDragEnded, cdkDragEntered, cdkDragExited, cdkDragDropped, and cdkDragMoved. With this directive, you can determine who is the draggable handler.
This solution worked for me:
Parent Component:
<div cdkDropList #list="cdkDropList"
[cdkDropListData]="myArray"
(cdkDropListDropped)="drop($event)">
<app-item
*ngFor="let item of myArray"
cdkDrag>
<div cdkDragHandle></div>
</app-item>
</div>
Child Component (app-item):
<div class="drag-container">
<ng-content></ng-content>
<div class="drag-handle">drag here</div>
</div>
Then style the cdk-drag-handle class in the parent component. cdk-drag-handle comes with material, so we do not need to apply it manually:
.cdk-drag-handle {
width: 100%;
height: 100%;
position: absolute;
z-index: 100;
background-color: transparent;
cursor: move;
}
Then style the drag-container with position: relative and whatever you want. I have an item inside it (drag-handle) which also takes the full width and height of the container, that contains an image (just as a sidenote).
165
This worked for me: Instead of using cdkDragHandle, just stop mouse down event propagation as bellow. Then only header can be dragged.
<div>
<header></header>
<body (mousedown)="$event.stopPropagation()"></body>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
