Skip to content

Commit 2b42f48

Browse files
cutiepokacutiepoka
authored
Add an example of scrolling in CDK Drag and Drop
1 parent 50a6d6c commit 2b42f48

File tree

4 files changed

+211
-0
lines changed

4 files changed

+211
-0
lines changed

‎src/cdk/drag-drop/drag-drop.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -280,3 +280,10 @@ This example shows how you can set up a table which supports re-ordering of tabs
280280
#### Sortable tabs
281281
Example of how to add sorting support to a `mat-tab-group`.
282282
<!-- example(cdk-drag-drop-tabs) -->
283+
284+
#### Scrollable container
285+
If your draggable items are inside a scrollable container (e.g., a div with overflow: auto)
286+
automatic scrolling will not work unless the scrollable container has the `cdkScrollable` directive.
287+
Without it, the CDK cannot detect or control the scroll behavior of the container during drag
288+
operations.
289+
<!-- example(cdk-drag-drop-scrollable) -->

‎src/components-examples/cdk/drag-drop/cdk-drag-drop-scrollable/cdk-drag-drop-scrollable-example.css

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
.container {
2+
height: 20rem;
3+
overflow: auto;
4+
}
5+
6+
.example-list {
7+
width: 500px;
8+
max-width: 100%;
9+
border: solid 1px #ccc;
10+
min-height: 60px;
11+
display: block;
12+
background: white;
13+
border-radius: 4px;
14+
overflow: hidden;
15+
}
16+
17+
.example-box {
18+
padding: 20px 10px;
19+
border-bottom: solid 1px #ccc;
20+
color: rgba(0, 0, 0, 0.87);
21+
display: flex;
22+
flex-direction: row;
23+
align-items: center;
24+
justify-content: space-between;
25+
box-sizing: border-box;
26+
cursor: move;
27+
background: white;
28+
font-size: 14px;
29+
}
30+
31+
.cdk-drag-preview {
32+
border: none;
33+
box-sizing: border-box;
34+
border-radius: 4px;
35+
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
36+
0 8px 10px 1px rgba(0, 0, 0, 0.14),
37+
0 3px 14px 2px rgba(0, 0, 0, 0.12);
38+
}
39+
40+
.cdk-drag-placeholder {
41+
opacity: 0;
42+
}
43+
44+
.cdk-drag-animating {
45+
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
46+
}
47+
48+
.example-box:last-child {
49+
border: none;
50+
}
51+
52+
.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
53+
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
54+
}

‎src/components-examples/cdk/drag-drop/cdk-drag-drop-scrollable/cdk-drag-drop-scrollable-example.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div class="container" cdkScrollable>
2+
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
3+
@for (elementName of elementNames; track elementName) {
4+
<div class="example-box" cdkDrag>{{elementName}}</div>
5+
}
6+
</div>
7+
</div>

‎src/components-examples/cdk/drag-drop/cdk-drag-drop-scrollable/cdk-drag-drop-scrollable-example.ts

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
import { Component } from "@angular/core";
2+
import {
3+
CdkDragDrop,
4+
CdkDropList,
5+
CdkDrag,
6+
moveItemInArray,
7+
} from "@angular/cdk/drag-drop";
8+
import { CdkScrollable } from "@angular/cdk/scrolling";
9+
10+
/**
11+
* @title Drag&Drop scrollable
12+
*/
13+
@Component({
14+
selector: "cdk-drag-drop-scrollable-example",
15+
templateUrl: "cdk-drag-drop-scrollable-example.html",
16+
styleUrl: "cdk-drag-drop-scrollable-example.css",
17+
imports: [CdkDropList, CdkDrag, CdkScrollable],
18+
})
19+
export class CdkDragDropScrollableExample {
20+
elementNames = [
21+
"Hydrogen",
22+
"Helium",
23+
"Lithium",
24+
"Beryllium",
25+
"Boron",
26+
"Carbon",
27+
"Nitrogen",
28+
"Oxygen",
29+
"Fluorine",
30+
"Neon",
31+
"Sodium",
32+
"Magnesium",
33+
"Aluminum",
34+
"Silicon",
35+
"Phosphorus",
36+
"Sulfur",
37+
"Chlorine",
38+
"Argon",
39+
"Potassium",
40+
"Calcium",
41+
"Scandium",
42+
"Titanium",
43+
"Vanadium",
44+
"Chromium",
45+
"Manganese",
46+
"Iron",
47+
"Cobalt",
48+
"Nickel",
49+
"Copper",
50+
"Zinc",
51+
"Gallium",
52+
"Germanium",
53+
"Arsenic",
54+
"Selenium",
55+
"Bromine",
56+
"Krypton",
57+
"Rubidium",
58+
"Strontium",
59+
"Yttrium",
60+
"Zirconium",
61+
"Niobium",
62+
"Molybdenum",
63+
"Technetium",
64+
"Ruthenium",
65+
"Rhodium",
66+
"Palladium",
67+
"Silver",
68+
"Cadmium",
69+
"Indium",
70+
"Tin",
71+
"Antimony",
72+
"Tellurium",
73+
"Iodine",
74+
"Xenon",
75+
"Cesium",
76+
"Barium",
77+
"Lanthanum",
78+
"Cerium",
79+
"Praseodymium",
80+
"Neodymium",
81+
"Promethium",
82+
"Samarium",
83+
"Europium",
84+
"Gadolinium",
85+
"Terbium",
86+
"Dysprosium",
87+
"Holmium",
88+
"Erbium",
89+
"Thulium",
90+
"Ytterbium",
91+
"Lutetium",
92+
"Hafnium",
93+
"Tantalum",
94+
"Tungsten",
95+
"Rhenium",
96+
"Osmium",
97+
"Iridium",
98+
"Platinum",
99+
"Gold",
100+
"Mercury",
101+
"Thallium",
102+
"Lead",
103+
"Bismuth",
104+
"Polonium",
105+
"Astatine",
106+
"Radon",
107+
"Francium",
108+
"Radium",
109+
"Actinium",
110+
"Thorium",
111+
"Protactinium",
112+
"Uranium",
113+
"Neptunium",
114+
"Plutonium",
115+
"Americium",
116+
"Curium",
117+
"Berkelium",
118+
"Californium",
119+
"Einsteinium",
120+
"Fermium",
121+
"Mendelevium",
122+
"Nobelium",
123+
"Lawrencium",
124+
"Rutherfordium",
125+
"Dubnium",
126+
"Seaborgium",
127+
"Bohrium",
128+
"Hassium",
129+
"Meitnerium",
130+
"Darmstadtium",
131+
"Roentgenium",
132+
"Copernicium",
133+
"Nihonium",
134+
"Flerovium",
135+
"Moscovium",
136+
"Livermorium",
137+
"Tennessine",
138+
"Oganesson",
139+
];
140+
drop(event: CdkDragDrop<string[]>) {
141+
moveItemInArray(this.elementNames, event.previousIndex, event.currentIndex);
142+
}
143+
}

0 commit comments

Comments
 (0)