Skip to content

Commit 5b5808d

Browse files
cutiepokacutiepoka
authored
docs(cdk/drag-drop): Add an example of scrolling in CDK Drag and Drop (#31528)
* Add an example of scrolling in CDK Drag and Drop * fixup! Add an example of scrolling in CDK Drag and Drop
1 parent 54edb6c commit 5b5808d

File tree

4 files changed

+206
-0
lines changed

4 files changed

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

0 commit comments

Comments
 (0)