Menu
I found this stackblitz example of adding drag-drop to a mat-table using angular cdk. However, the desired behavior is that the row is only draggable using the element with the cdkDragHandle directive. In this example you can drag the element by clicking anywhere on the row. How can this be modified so that the row is only draggable using the drag handle?
https://stackblitz.com/edit/angular-igmugp
802
When you check in the browser, it allows you to drag the item. It will not drop it in the list and will remain as it is when you leave the mouse pointer. The function onDrop takes care of dropping the item dragged in the position required.
If you want to disable dragging for a particular drag item, you can do so by setting the cdkDragDisabled input on a cdkDrag item. Furthermore, you can disable an entire list using the cdkDropListDisabled input on a cdkDropList or a particular handle via cdkDragHandleDisabled on cdkDragHandle .
To implement drag and drop list you have to include your ngFor repeated section inside a parent div to make that section draggable. This is just a basic structure of how the draggable section should look. Now we have to provide DndList directives to this structure. Basic functioning HTML for drag and drop list.
For anyone wondering how to implement drag and drop on a mat-table, you need to: on ListDrop (event: CdkDragDrop<string[]>) { // Swap the elements around move ItemInArray (this.myArray, event.previousIndex, event.currentIndex) ; } moveItemInArray is an Angular Material function.
However, the desired behavior is that the row is only draggable using the element with the cdkDragHandle directive. In this example you can drag the element by clicking anywhere on the row. How can this be modified so that the row is only draggable using the drag handle? Show activity on this post.
I heard the cdk drag and drop work well with Material table. Because in material table, you can use the flexbox implementation.
...] To add drag and drop functionality we must define the table as a cdkDropList and the rows as cdkDrag. The cdkDropList is a container that, when wrapped around cdkDrag elements, groups the drag elements into a reorderable list.
Here is my workaround for this issue:
cdkDrag should be disabled. Default behavior is disabled.mousedown, mouseup, touchstart, and touchend event handler to the cdkDragHandle to toggle the control.cdkDrag, listen to the cdkDragReleased event to disable the cdkDrag after it is dragged.The side-effect is that it becomes harder to work with items that you really want to disable (e.g. apply style for those truly disabled items).
The code looks like below:
dragDisabled = true;
<mat-row
*matRowDef="let row; columns: displayedColumns"
cdkDrag
[cdkDragData]="row"
[cdkDragDisabled]="dragDisabled"
(cdkDragReleased)="dragDisabled = true"
></mat-row>
<mat-icon
cdkDragHandle
(touchstart)="dragDisabled = false"
(touchend)="dragDisabled = true"
(mousedown)="dragDisabled = false"
(mouseup)="dragDisabled = true"
>drag_indicator</mat-icon
>
I have found a somewhat simple issue to this complex problem. For any simple text td in the draggable tr, we can use the pointer-events:none and it will disable all the text element.
On the handle icon, use the pointer-events:all and it will enable dragging from only the icon.
This also has the issue where it disables all the anchor and buttons. So for icon and buttons do the follwoing
check this stackblits for working answer https://stackblitz.com/edit/angular-rwzc76
27
IMHO there is no quick-fix to this, other than hacking/overriding the source code of Angular Material / CDK. Testament of this is the open feature request at github: https://github.com/angular/material2/issues/13770.
The issue is that the cdkDrag on a datasource / MatTable automatically creates drag annotations on all child elements (which generates the behavior) and can't be (easily) overriden.
Based on the documentation cdkDrag/cdkDragDisabled - cdkDragHandle/cdkDragHandleDisabled should help (it does work without a table). I've upgraded all the libraries from the example to support them but to no effect.
2
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
