Skip to content

Commit 36eedae

Browse files
crisbetocrisbeto
committed
main - f446d7c feat(cdk/drag-drop): add opt-in indicator of pick-up position (#31288)
1 parent b384f36 commit 36eedae

20 files changed

+419
-30
lines changed

‎cdk/drag-drop/index.d.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -234,4 +234,15 @@ declare class CdkDragDropTabsExample {
234234
static ɵcmp: i0.ɵɵComponentDeclaration<CdkDragDropTabsExample, "cdk-drag-drop-tabs-example", never, {}, {}, never, never, true, never>;
235235
}
236236

237-
export { CdkDragDropAxisLockExample, CdkDragDropBoundaryExample, CdkDragDropConnectedSortingExample, CdkDragDropConnectedSortingGroupExample, CdkDragDropCustomPlaceholderExample, CdkDragDropCustomPreviewExample, CdkDragDropDelayExample, CdkDragDropDisabledExample, CdkDragDropDisabledSortingExample, CdkDragDropEnterPredicateExample, CdkDragDropFreeDragPositionExample, CdkDragDropHandleExample, CdkDragDropHorizontalSortingExample, CdkDragDropMixedSortingExample, CdkDragDropOverviewExample, CdkDragDropRootElementExample, CdkDragDropSortPredicateExample, CdkDragDropSortingExample, CdkDragDropTableExample, CdkDragDropTabsExample };
237+
/**
238+
* @title Drag&Drop copy between lists
239+
*/
240+
declare class CdkDragDropCopyListExample {
241+
products: string[];
242+
cart: string[];
243+
drop(event: CdkDragDrop<string[]>): void;
244+
static ɵfac: i0.ɵɵFactoryDeclaration<CdkDragDropCopyListExample, never>;
245+
static ɵcmp: i0.ɵɵComponentDeclaration<CdkDragDropCopyListExample, "cdk-drag-drop-copy-list-example", never, {}, {}, never, never, true, never>;
246+
}
247+
248+
export { CdkDragDropAxisLockExample, CdkDragDropBoundaryExample, CdkDragDropConnectedSortingExample, CdkDragDropConnectedSortingGroupExample, CdkDragDropCopyListExample, CdkDragDropCustomPlaceholderExample, CdkDragDropCustomPreviewExample, CdkDragDropDelayExample, CdkDragDropDisabledExample, CdkDragDropDisabledSortingExample, CdkDragDropEnterPredicateExample, CdkDragDropFreeDragPositionExample, CdkDragDropHandleExample, CdkDragDropHorizontalSortingExample, CdkDragDropMixedSortingExample, CdkDragDropOverviewExample, CdkDragDropRootElementExample, CdkDragDropSortPredicateExample, CdkDragDropSortingExample, CdkDragDropTableExample, CdkDragDropTabsExample };

‎docs-content/api-docs/cdk-drag-drop.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -299,6 +299,26 @@ <h4 id="CdkDropList" class="docs-header-link docs-api-h4 docs-api-class-name">
299299

300300

301301

302+
<tr class="docs-api-properties-row">
303+
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">@Input(<span class="docs-api-input-alias">{ alias: &#39;cdkDropListHasAnchor&#39;, transform: booleanAttribute }</span>)
304+
</div><p class="docs-api-property-name">
305+
<code>hasAnchor: boolean</code>
306+
</p>
307+
</td>
308+
<td class="docs-api-property-description"><p>By default when an item leaves its initial container, its placeholder will be transferred
309+
to the new container. If that&#39;s not desirable for your use case, you can enable this option
310+
which will clone the placeholder and leave it inside the original container. If the item is
311+
returned to the initial container, the anchor element will be removed automatically.</p>
312+
<p>The cloned placeholder can be styled by targeting the <code>cdk-drag-anchor</code> class.</p>
313+
<p>This option is useful in combination with <code>cdkDropListSortingDisabled</code> to implement copying
314+
behavior in a drop list.</p>
315+
</td>
316+
</tr>
317+
318+
319+
320+
321+
302322
<tr class="docs-api-properties-row">
303323
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">
304324
@Input()</div><p class="docs-api-property-name">
@@ -2424,6 +2444,19 @@ <h4 id="DropListRef" class="docs-header-link docs-api-h4 docs-api-class-name">
24242444

24252445

24262446

2447+
<tr class="docs-api-properties-row">
2448+
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
2449+
<code>hasAnchor: boolean</code>
2450+
</p>
2451+
</td>
2452+
<td class="docs-api-property-description"><p>Whether the items in the list should leave an anchor node when leaving the initial container.</p>
2453+
</td>
2454+
</tr>
2455+
2456+
2457+
2458+
2459+
24272460
<tr class="docs-api-properties-row">
24282461
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
24292462
<code>lockAxis: &#39;x&#39; | &#39;y&#39;</code>
@@ -2836,6 +2869,56 @@ <h5 class="docs-api-h5 docs-api-method-header">Methods</h5>
28362869

28372870

28382871

2872+
<table class="docs-api-method-table">
2873+
<thead>
2874+
<tr class="docs-api-method-name-row">
2875+
<th colspan="2" class="docs-api-method-name-cell">getItemAtIndex
2876+
</th>
2877+
</tr>
2878+
</thead><tr class="docs-api-method-description-row">
2879+
<td colspan="2" class="docs-api-method-description-cell">
2880+
<p>Gets the item at a specific index.</p>
2881+
2882+
</td>
2883+
</tr><thead>
2884+
<tr class="docs-api-method-parameters-header-row">
2885+
<th colspan="2" class="docs-api-method-parameters-header-cell">Parameters</th>
2886+
</tr>
2887+
</thead>
2888+
2889+
<tr class="docs-api-method-parameter-row">
2890+
<td class="docs-api-method-parameter-cell">
2891+
<p class="docs-api-method-parameter-name">
2892+
index</p>
2893+
<code class="docs-api-method-parameter-type">number</code>
2894+
</td>
2895+
<td class="docs-api-method-parameter-description-cell">
2896+
<p class="docs-api-method-parameter-description">
2897+
<p>Index at which to retrieve the item.</p>
2898+
2899+
</p>
2900+
</td>
2901+
</tr>
2902+
<thead>
2903+
<tr class="docs-api-method-returns-header-row">
2904+
<th colspan="2" class="docs-api-method-returns-header-cell">Returns</th>
2905+
</tr>
2906+
</thead>
2907+
<tr>
2908+
<td class="docs-api-method-returns-type-cell">
2909+
<code class="docs-api-method-returns-type">DragRef | null</code>
2910+
</td>
2911+
<td class="docs-api-method-returns-description-cell">
2912+
<p class="docs-api-method-returns-description">
2913+
2914+
</p>
2915+
</td>
2916+
</tr></table>
2917+
2918+
2919+
2920+
2921+
28392922
<table class="docs-api-method-table">
28402923
<thead>
28412924
<tr class="docs-api-method-name-row">

‎docs-content/examples-highlighted/cdk/drag-drop/cdk-drag-drop-copy-list/cdk-drag-drop-copy-list-example-css.html‎

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

‎docs-content/examples-highlighted/cdk/drag-drop/cdk-drag-drop-copy-list/cdk-drag-drop-copy-list-example-html.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-container&quot;</span>&gt;</span>
2+
<span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Products<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
3+
4+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span>
5+
<span class="hljs-attr">cdkDropList</span>
6+
[<span class="hljs-attr">cdkDropListData</span>]=<span class="hljs-string">&quot;products&quot;</span>
7+
[<span class="hljs-attr">cdkDropListConnectedTo</span>]=<span class="hljs-string">&quot;[cartList]&quot;</span>
8+
<span class="hljs-attr">cdkDropListSortingDisabled</span>
9+
<span class="hljs-attr">cdkDropListHasAnchor</span>
10+
<span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-list&quot;</span>&gt;</span>
11+
@for (product of products; track $index) {
12+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-box&quot;</span> <span class="hljs-attr">cdkDrag</span> [<span class="hljs-attr">cdkDragData</span>]=<span class="hljs-string">&quot;product&quot;</span>&gt;</span>{{product}}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
13+
}
14+
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
15+
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
16+
17+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-container&quot;</span>&gt;</span>
18+
<span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Shopping cart<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
19+
20+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span>
21+
<span class="hljs-attr">cdkDropList</span>
22+
#<span class="hljs-attr">cartList</span>=<span class="hljs-string">&quot;cdkDropList&quot;</span>
23+
[<span class="hljs-attr">cdkDropListData</span>]=<span class="hljs-string">&quot;cart&quot;</span>
24+
<span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-list&quot;</span>
25+
(<span class="hljs-attr">cdkDropListDropped</span>)=<span class="hljs-string">&quot;drop($event)&quot;</span>&gt;</span>
26+
@for (product of cart; track $index) {
27+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-box&quot;</span> <span class="hljs-attr">cdkDrag</span>&gt;</span>{{product}}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
28+
}
29+
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
30+
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
31+

‎docs-content/examples-highlighted/cdk/drag-drop/cdk-drag-drop-copy-list/cdk-drag-drop-copy-list-example-ts.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">Component</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
2+
<span class="hljs-keyword">import</span> {
3+
<span class="hljs-title class_">CdkDragDrop</span>,
4+
moveItemInArray,
5+
copyArrayItem,
6+
<span class="hljs-title class_">CdkDrag</span>,
7+
<span class="hljs-title class_">CdkDropList</span>,
8+
} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/cdk/drag-drop&#x27;</span>;
9+
10+
<span class="hljs-comment">/**
11+
* <span class="hljs-doctag">@title</span> Drag&amp;Drop copy between lists
12+
*/</span>
13+
<span class="hljs-meta">@Component</span>({
14+
<span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;cdk-drag-drop-copy-list-example&#x27;</span>,
15+
<span class="hljs-attr">templateUrl</span>: <span class="hljs-string">&#x27;cdk-drag-drop-copy-list-example.html&#x27;</span>,
16+
<span class="hljs-attr">styleUrl</span>: <span class="hljs-string">&#x27;cdk-drag-drop-copy-list-example.css&#x27;</span>,
17+
<span class="hljs-attr">imports</span>: [<span class="hljs-title class_">CdkDropList</span>, <span class="hljs-title class_">CdkDrag</span>],
18+
})
19+
<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">CdkDragDropCopyListExample</span> {
20+
products = [<span class="hljs-string">&#x27;Bananas&#x27;</span>, <span class="hljs-string">&#x27;Oranges&#x27;</span>, <span class="hljs-string">&#x27;Bread&#x27;</span>, <span class="hljs-string">&#x27;Butter&#x27;</span>, <span class="hljs-string">&#x27;Soda&#x27;</span>, <span class="hljs-string">&#x27;Eggs&#x27;</span>];
21+
cart = [<span class="hljs-string">&#x27;Tomatoes&#x27;</span>];
22+
23+
<span class="hljs-title function_">drop</span>(<span class="hljs-params"><span class="hljs-attr">event</span>: <span class="hljs-title class_">CdkDragDrop</span>&lt;<span class="hljs-built_in">string</span>[]&gt;</span>) {
24+
<span class="hljs-keyword">if</span> (event.<span class="hljs-property">previousContainer</span> === event.<span class="hljs-property">container</span>) {
25+
<span class="hljs-title function_">moveItemInArray</span>(event.<span class="hljs-property">container</span>.<span class="hljs-property">data</span>, event.<span class="hljs-property">previousIndex</span>, event.<span class="hljs-property">currentIndex</span>);
26+
} <span class="hljs-keyword">else</span> {
27+
<span class="hljs-title function_">copyArrayItem</span>(
28+
event.<span class="hljs-property">previousContainer</span>.<span class="hljs-property">data</span>,
29+
event.<span class="hljs-property">container</span>.<span class="hljs-property">data</span>,
30+
event.<span class="hljs-property">previousIndex</span>,
31+
event.<span class="hljs-property">currentIndex</span>,
32+
);
33+
}
34+
}
35+
}

‎docs-content/examples-highlighted/cdk/drag-drop/index-ts.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,4 @@
1818
<span class="hljs-keyword">export</span> {<span class="hljs-title class_">CdkDragDropTableExample</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./cdk-drag-drop-table/cdk-drag-drop-table-example&#x27;</span>;
1919
<span class="hljs-keyword">export</span> {<span class="hljs-title class_">CdkDragDropMixedSortingExample</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./cdk-drag-drop-mixed-sorting/cdk-drag-drop-mixed-sorting-example&#x27;</span>;
2020
<span class="hljs-keyword">export</span> {<span class="hljs-title class_">CdkDragDropTabsExample</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./cdk-drag-drop-tabs/cdk-drag-drop-tabs-example&#x27;</span>;
21+
<span class="hljs-keyword">export</span> {<span class="hljs-title class_">CdkDragDropCopyListExample</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./cdk-drag-drop-copy-list/cdk-drag-drop-copy-list-example&#x27;</span>;

‎docs-content/examples-source/cdk/drag-drop/cdk-drag-drop-copy-list/cdk-drag-drop-copy-list-example.css‎

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

‎docs-content/examples-source/cdk/drag-drop/cdk-drag-drop-copy-list/cdk-drag-drop-copy-list-example.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<div class="example-container">
2+
<h2>Products</h2>
3+
4+
<div
5+
cdkDropList
6+
[cdkDropListData]="products"
7+
[cdkDropListConnectedTo]="[cartList]"
8+
cdkDropListSortingDisabled
9+
cdkDropListHasAnchor
10+
class="example-list">
11+
@for (product of products; track $index) {
12+
<div class="example-box" cdkDrag [cdkDragData]="product">{{product}}</div>
13+
}
14+
</div>
15+
</div>
16+
17+
<div class="example-container">
18+
<h2>Shopping cart</h2>
19+
20+
<div
21+
cdkDropList
22+
#cartList="cdkDropList"
23+
[cdkDropListData]="cart"
24+
class="example-list"
25+
(cdkDropListDropped)="drop($event)">
26+
@for (product of cart; track $index) {
27+
<div class="example-box" cdkDrag>{{product}}</div>
28+
}
29+
</div>
30+
</div>
31+

‎docs-content/examples-source/cdk/drag-drop/cdk-drag-drop-copy-list/cdk-drag-drop-copy-list-example.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import {Component} from '@angular/core';
2+
import {
3+
CdkDragDrop,
4+
moveItemInArray,
5+
copyArrayItem,
6+
CdkDrag,
7+
CdkDropList,
8+
} from '@angular/cdk/drag-drop';
9+
10+
/**
11+
* @title Drag&Drop copy between lists
12+
*/
13+
@Component({
14+
selector: 'cdk-drag-drop-copy-list-example',
15+
templateUrl: 'cdk-drag-drop-copy-list-example.html',
16+
styleUrl: 'cdk-drag-drop-copy-list-example.css',
17+
imports: [CdkDropList, CdkDrag],
18+
})
19+
export class CdkDragDropCopyListExample {
20+
products = ['Bananas', 'Oranges', 'Bread', 'Butter', 'Soda', 'Eggs'];
21+
cart = ['Tomatoes'];
22+
23+
drop(event: CdkDragDrop<string[]>) {
24+
if (event.previousContainer === event.container) {
25+
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
26+
} else {
27+
copyArrayItem(
28+
event.previousContainer.data,
29+
event.container.data,
30+
event.previousIndex,
31+
event.currentIndex,
32+
);
33+
}
34+
}
35+
}

‎docs-content/examples-source/cdk/drag-drop/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,4 @@ export {CdkDragDropSortPredicateExample} from './cdk-drag-drop-sort-predicate/cd
1818
export {CdkDragDropTableExample} from './cdk-drag-drop-table/cdk-drag-drop-table-example';
1919
export {CdkDragDropMixedSortingExample} from './cdk-drag-drop-mixed-sorting/cdk-drag-drop-mixed-sorting-example';
2020
export {CdkDragDropTabsExample} from './cdk-drag-drop-tabs/cdk-drag-drop-tabs-example';
21+
export {CdkDragDropCopyListExample} from './cdk-drag-drop-copy-list/cdk-drag-drop-copy-list-example';

0 commit comments

Comments
 (0)