Drag and Drop with MatTable

[fbaezap]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

Drag and drop with a drag handle and MatTable

What is the current behavior?

The drag handle is not being found. The ContentChildren on CdkDrag doesn't get it.

What are the steps to reproduce?

StackBlitz https://stackblitz.com/edit/angular-igmugp

What is the use-case or motivation for changing an existing behavior?

If the drag handle could be found, we could use drag and drop using a handle with a table

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 7.0.0
Angular Material 7.0.1

[EHardy80]

Not to muddy the water, but this line of your StackBlitz solved an issue I was having with the previousIndex of the CdkDragDrop event (thanks btw!):
const prevIndex = this.dataSource.findIndex((d) => d === event.item.data);

Is there a known issue with event.previousIndex when used with MatTable?

[fbaezap]

Glad to help :)
I don't know if there is an issue with that :/ but I think it's because of using the same source for the drop and the table

[antoine-le-maire]

I'm also trying to implement drag and drop reorder in my material table and I'm having the same issue. Does anyone have a working example of it ?

By the way, I feel like this is a rather standard use case (drag and drop reorder in a material table). Wouldn't it make sense to have a working example of it in the angular material documentation about drag and drop ?

[samir-h]

@antoine-le-maire I implemented it, the problem was with the dragPreview. The solution is to implement ( remake ) the actual design of the row, because the styles were not applied by default.

[antoine-le-maire]

I think there are 2 problems around the table + drag and drop, both reproduced by the stackblitz above :

• Using a drag handle (https://material.angular.io/cdk/drag-drop/overview#customizing-the-drag-area-using-a-handle) doesn't seem to work : even with a drag handle you can still drag from the whole row.
• The drag preview shrinks

I believe you're talking about the 2nd problem here right ? If so, how did you re-design the row ? Did you read the width of each column in the dom to force it to the dragged element (jquery style) ?

[henry-phelps-ascendlearning-com]

@antoine-le-maire did you find a solution to make cdkDragHandle work with the mat-table?

[samir-h]

@antoine-le-maire @henry-phelps-ascendlearning-com The workaround with the drag handle is to make the whole row dragable, then with css add pointer-events: none. Then on the element you want to be the drag handle you put pointer-events: all

I did not find a solution, I had to let the whole row draggable. This is acceptable for now but this is a problem if you want to select text in the row for example.

[benediktberger]

@samir-h @lemairea : Can you provide a code snippet where to add the drag and drop directives? I cant make it work even with the whole mat-header-row draggable.

[henry-phelps-ascendlearning-com]

I got it to work using @samir-h suggestion. Here is an example: https://stackblitz.com/edit/angular-8tmeav . See lines 14 and 39 of app.component.html

[benediktberger]

Ah, sorry I was thinking about reordering the table columns. It did basically the same, using the mat-header-row as cdkDropList and adding cdkDrag to each mat-header-cell.

See https://stackblitz.com/edit/angular-cc77j7 . I can move the headers, but it doesn't even trigger the drop event afterwards. When moving the cdkDrag to the mat-header-row I can grab and drag the whole header row, but thats pointless :)
I was not able to get any further :(

[eliskaachee]

@antoine-le-maire I implemented it, the problem was with the dragPreview. The solution is to implement ( remake ) the actual design of the row, because the styles were not applied by default.

@samir-h, Do you have an example of redesigning the row so the styles apply? I'm currently having that issue.

[samir-h]

@eliskaachee Use the .cdk-drag-preview class , and then just reimplement the styles of how you want the element that is dragged to look. For example

.cdk-drag-preview {
  display: flex;
  width: 100%;

  .cell {
    display: flex;
    flex: 1 1 0%;
  }

// or other styles that you need to make the drag preview look like the actual table row

[SaiSirishaS]

@samir-h Your suggestion to add the "pointer-events: none" to the mat-row helped me solve the issue. But my table also has an Input. By making the Pointer events none I'll not be able to use Input.
Solution which I tried is applying "pointer-events: all" again on the Input alone but then it would be draggable again. Is there any solution for this?