Skip to content

Commit

Permalink
docs(cdk\drag-drop): Add table drag drop example
Browse files Browse the repository at this point in the history
Adds an example that shows how to drag and drop table rows
Fixes angular#25168
  • Loading branch information
GiftLanga committed Apr 29, 2024
1 parent 11ade32 commit 94f4ae2
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 29 deletions.
@@ -1,28 +1,28 @@
table {
width: 100%;
}

.dragCursor {
margin-right: 16px;
cursor: move;
}

.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
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);
}

.cdk-drag-placeholder {
background: #e0e0e0;
}

.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
table {
width: 100%;
}

.example-drag-cursor {
margin-right: 16px;
cursor: move;
}

.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
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);
}

.cdk-drag-placeholder {
background: #e0e0e0;
}

.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
Expand Up @@ -4,7 +4,7 @@
<ng-container matColumnDef="position" sticky>
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-icon class="dragCursor" (mousedown)="dragDisabled = false;">reorder</mat-icon>
<mat-icon class="example-drag-cursor" (mousedown)="dragDisabled = false;">reorder</mat-icon>
<span>{{element.position}}</span>
</mat-cell>
</ng-container>
Expand Down

0 comments on commit 94f4ae2

Please sign in to comment.