Skip to content

Commit 22526c3

Browse files
brandyscarneybrandyscarney
committed
docs(reorder): add reorder move playground
1 parent c5a4ad3 commit 22526c3

8 files changed

Lines changed: 500 additions & 0 deletions

File tree

‎docs/api/reorder.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,19 @@ import UpdatingData from '@site/static/usage/v8/reorder/updating-data/index.md';
7373

7474
<UpdatingData />
7575

76+
## Event Handling
77+
78+
### Using `ionReorderStart` and `ionReorderEnd`
79+
80+
import ReorderStartEnd from '@site/static/usage/v8/reorder/reorder-start-end/index.md';
81+
82+
<ReorderStartEnd />
83+
84+
### Using `ionReorderMove`
85+
86+
import ReorderMove from '@site/static/usage/v8/reorder/reorder-move/index.md';
87+
88+
<ReorderMove />
7689

7790
## Usage with Virtual Scroll
7891

‎static/usage/v8/reorder/reorder-move/angular/example_component_html.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
```html
2+
<ion-list lines="full">
3+
<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
4+
<!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
5+
<ion-reorder-group
6+
[disabled]="false"
7+
(ionReorderMove)="handleReorderMove($any($event))"
8+
(ionReorderEnd)="handleReorderEnd($any($event))"
9+
>
10+
@for (item of items; track item; let i = $index) {
11+
<ion-item [id]="'item-' + (i + 1)">
12+
<b slot="start">{{ i + 1 }}</b>
13+
<ion-label>{{ item }}</ion-label>
14+
<ion-reorder slot="end"></ion-reorder>
15+
</ion-item>
16+
}
17+
</ion-reorder-group>
18+
</ion-list>
19+
```

‎static/usage/v8/reorder/reorder-move/angular/example_component_ts.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import {
4+
IonItem,
5+
IonLabel,
6+
IonList,
7+
IonReorder,
8+
IonReorderGroup,
9+
ReorderEndCustomEvent,
10+
ReorderMoveCustomEvent,
11+
} from '@ionic/angular/standalone';
12+
13+
@Component({
14+
selector: 'app-example',
15+
templateUrl: 'example.component.html',
16+
styleUrls: ['example.component.css'],
17+
imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
18+
})
19+
export class ExampleComponent {
20+
items = ['Buy groceries', 'Call the bank', 'Finish project report', 'Book flight tickets', 'Read a book'];
21+
22+
handleReorderMove(event: ReorderMoveCustomEvent) {
23+
const from = event.detail.from;
24+
const to = event.detail.to;
25+
26+
// Get all items and sort by their current id (item-1, item-2, ...)
27+
const itemElements = Array.from(document.querySelectorAll('ion-item')).sort((a, b) => {
28+
const aNum = parseInt(a.id.replace('item-', ''), 10);
29+
const bNum = parseInt(b.id.replace('item-', ''), 10);
30+
return aNum - bNum;
31+
});
32+
33+
// Dragging down: shift up items between from+1 and to, set dragged to to+1
34+
if (from < to) {
35+
for (let i = from; i <= to; i++) {
36+
const item = itemElements[i];
37+
const itemNum = item.querySelector('b');
38+
if (itemNum) {
39+
if (i === from) {
40+
// Dragged item
41+
itemNum.textContent = String(to + 1);
42+
item.id = `item-${to + 1}`;
43+
} else {
44+
// Items shift up
45+
itemNum.textContent = String(i);
46+
item.id = `item-${i}`;
47+
}
48+
}
49+
}
50+
// Dragging up: shift down items between to and from-1, set dragged to to+1
51+
} else if (from > to) {
52+
for (let i = to; i <= from; i++) {
53+
const item = itemElements[i];
54+
const itemNum = item.querySelector('b');
55+
if (itemNum) {
56+
if (i === from) {
57+
// Dragged item
58+
itemNum.textContent = String(to + 1);
59+
item.id = `item-${to + 1}`;
60+
} else {
61+
// Items shift down
62+
itemNum.textContent = String(i + 2);
63+
item.id = `item-${i + 2}`;
64+
}
65+
}
66+
}
67+
}
68+
}
69+
70+
handleReorderEnd(event: ReorderEndCustomEvent) {
71+
// Finish the reorder and update the items data
72+
this.items = event.detail.complete(this.items);
73+
}
74+
}
75+
```

‎static/usage/v8/reorder/reorder-move/demo.html‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Reorder</title>
7+
<link rel="stylesheet" href="../../common.css" />
8+
<script src="../../common.js"></script>
9+
<script
10+
type="module"
11+
src="https://cdn.jsdelivr.net/npm/@ionic/core@8.6.2-dev.11749759855.198287b7/dist/ionic/ionic.esm.js"
12+
></script>
13+
<link
14+
rel="stylesheet"
15+
href="https://cdn.jsdelivr.net/npm/@ionic/core@8.6.2-dev.11749759855.198287b7/css/ionic.bundle.css"
16+
/>
17+
18+
<style>
19+
ion-list {
20+
width: 300px;
21+
}
22+
</style>
23+
</head>
24+
25+
<body>
26+
<ion-app>
27+
<ion-content>
28+
<div class="container">
29+
<ion-list lines="full">
30+
<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
31+
<ion-reorder-group disabled="false"></ion-reorder-group>
32+
</ion-list>
33+
</div>
34+
</ion-content>
35+
</ion-app>
36+
37+
<script>
38+
let items = ['Buy groceries', 'Call the bank', 'Finish project report', 'Book flight tickets', 'Read a book'];
39+
const reorderGroup = document.querySelector('ion-reorder-group');
40+
41+
document.addEventListener('DOMContentLoaded', () => {
42+
reorderItems(items);
43+
});
44+
45+
reorderGroup.addEventListener('ionReorderMove', ({ detail }) => {
46+
const from = detail.from;
47+
const to = detail.to;
48+
49+
// Get all items and sort by their current id (item-1, item-2, ...)
50+
const itemElements = Array.from(reorderGroup.querySelectorAll('ion-item')).sort((a, b) => {
51+
const aNum = parseInt(a.id.replace('item-', ''), 10);
52+
const bNum = parseInt(b.id.replace('item-', ''), 10);
53+
return aNum - bNum;
54+
});
55+
56+
// Dragging down: shift up items between from+1 and to, set dragged to to+1
57+
if (from < to) {
58+
for (let i = from; i <= to; i++) {
59+
const item = itemElements[i];
60+
const itemNum = item.querySelector('b');
61+
if (i === from) {
62+
// Dragged item
63+
itemNum.textContent = to + 1;
64+
item.id = `item-${to + 1}`;
65+
} else {
66+
// Items shift up
67+
itemNum.textContent = i;
68+
item.id = `item-${i}`;
69+
}
70+
}
71+
// Dragging up: shift down items between to and from-1, set dragged to to+1
72+
} else if (from > to) {
73+
for (let i = to; i <= from; i++) {
74+
const item = itemElements[i];
75+
const itemNum = item.querySelector('b');
76+
if (i === from) {
77+
// Dragged item
78+
itemNum.textContent = to + 1;
79+
item.id = `item-${to + 1}`;
80+
} else {
81+
// Items shift down
82+
itemNum.textContent = i + 2;
83+
item.id = `item-${i + 2}`;
84+
}
85+
}
86+
}
87+
});
88+
89+
reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
90+
// Finish the reorder and update the items data
91+
items = detail.complete(items);
92+
93+
// Re-render the DOM to match the new order
94+
reorderItems(items);
95+
});
96+
97+
function reorderItems(items) {
98+
reorderGroup.replaceChildren();
99+
100+
let reordered = '';
101+
102+
for (let i = 0; i < items.length; i++) {
103+
reordered += `
104+
<ion-item id="item-${i + 1}">
105+
<b slot="start">${i + 1}</b>
106+
<ion-label>
107+
${items[i]}
108+
</ion-label>
109+
<ion-reorder slot="end"></ion-reorder>
110+
</ion-item>
111+
`;
112+
}
113+
114+
reorderGroup.innerHTML = reordered;
115+
}
116+
</script>
117+
</body>
118+
</html>

‎static/usage/v8/reorder/reorder-move/index.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
7+
import angular_example_component_ts from './angular/example_component_ts.md';
8+
import angular_example_component_html from './angular/example_component_html.md';
9+
10+
<Playground
11+
version="8"
12+
code={{
13+
javascript,
14+
react,
15+
vue,
16+
angular: {
17+
files: {
18+
'src/app/example.component.ts': angular_example_component_ts,
19+
'src/app/example.component.html': angular_example_component_html,
20+
},
21+
},
22+
}}
23+
src="usage/v8/reorder/reorder-move/demo.html"
24+
size="300px"
25+
/>

‎static/usage/v8/reorder/reorder-move/javascript.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
```html
2+
<ion-list lines="full">
3+
<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
4+
<ion-reorder-group disabled="false"></ion-reorder-group>
5+
</ion-list>
6+
7+
<script>
8+
let items = ['Buy groceries', 'Call the bank', 'Finish project report', 'Book flight tickets', 'Read a book'];
9+
const reorderGroup = document.querySelector('ion-reorder-group');
10+
11+
reorderItems(items);
12+
13+
reorderGroup.addEventListener('ionReorderMove', ({ detail }) => {
14+
const from = detail.from;
15+
const to = detail.to;
16+
17+
// Get all items and sort by their current id (item-1, item-2, ...)
18+
const itemElements = Array.from(reorderGroup.querySelectorAll('ion-item')).sort((a, b) => {
19+
const aNum = parseInt(a.id.replace('item-', ''), 10);
20+
const bNum = parseInt(b.id.replace('item-', ''), 10);
21+
return aNum - bNum;
22+
});
23+
24+
// Dragging down: shift up items between from+1 and to, set dragged to to+1
25+
if (from < to) {
26+
for (let i = from; i <= to; i++) {
27+
const item = itemElements[i];
28+
const itemNum = item.querySelector('b');
29+
if (i === from) {
30+
// Dragged item
31+
itemNum.textContent = to + 1;
32+
item.id = `item-${to + 1}`;
33+
} else {
34+
// Items shift up
35+
itemNum.textContent = i;
36+
item.id = `item-${i}`;
37+
}
38+
}
39+
// Dragging up: shift down items between to and from-1, set dragged to to+1
40+
} else if (from > to) {
41+
for (let i = to; i <= from; i++) {
42+
const item = itemElements[i];
43+
const itemNum = item.querySelector('b');
44+
if (i === from) {
45+
// Dragged item
46+
itemNum.textContent = to + 1;
47+
item.id = `item-${to + 1}`;
48+
} else {
49+
// Items shift down
50+
itemNum.textContent = i + 2;
51+
item.id = `item-${i + 2}`;
52+
}
53+
}
54+
}
55+
});
56+
57+
reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
58+
// Finish the reorder and update the items data
59+
items = detail.complete(items);
60+
61+
// Re-render the DOM to match the new order
62+
reorderItems(items);
63+
});
64+
65+
function reorderItems(items) {
66+
reorderGroup.replaceChildren();
67+
68+
let reordered = '';
69+
70+
for (let i = 0; i < items.length; i++) {
71+
reordered += `
72+
<ion-item id="item-${i + 1}">
73+
<b slot="start">${i + 1}</b>
74+
<ion-label>
75+
${items[i]}
76+
</ion-label>
77+
<ion-reorder slot="end"></ion-reorder>
78+
</ion-item>
79+
`;
80+
}
81+
82+
reorderGroup.innerHTML = reordered;
83+
}
84+
</script>
85+
```

0 commit comments

Comments
 (0)