|
14 | 14 | <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script> |
15 | 15 | </head> |
16 | 16 |
|
17 | | - <body onLoad="render()"> |
| 17 | + <body> |
18 | 18 | <ion-app> |
19 | 19 | <ion-header> |
20 | 20 | <ion-toolbar> |
|
24 | 24 |
|
25 | 25 | <ion-content id="content"> |
26 | 26 | <ion-list> |
27 | | - <ion-reorder-group id="reorderGroup" disabled="false"> |
| 27 | + <ion-reorder-group disabled="false"> |
28 | 28 | <!-- items will be inserted here --> |
29 | 29 | </ion-reorder-group> |
30 | 30 | </ion-list> |
|
36 | 36 | for (var i = 0; i < 30; i++) { |
37 | 37 | items.push(i + 1); |
38 | 38 | } |
39 | | - const reorderGroup = document.getElementById('reorderGroup'); |
40 | | - |
41 | | - function render() { |
42 | | - let html = ''; |
43 | | - for (let item of items) { |
44 | | - html += ` |
45 | | - <ion-item> |
46 | | - <ion-label>${item}</ion-label> |
47 | | - <ion-reorder slot="end"></ion-reorder> |
48 | | - </ion-item>`; |
49 | | - } |
50 | | - reorderGroup.innerHTML = html; |
51 | | - } |
| 39 | + const reorderGroup = document.querySelector('ion-reorder-group'); |
| 40 | + reorderItems(items); |
52 | 41 |
|
53 | 42 | reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => { |
54 | | - console.log('Dragged from index', detail.from, 'to', detail.to); |
55 | | - |
| 43 | + // Before complete is called with the items they will remain in the |
| 44 | + // order before the drag |
56 | 45 | console.log('Before complete', items); |
| 46 | + |
| 47 | + // Finish the reorder and position the item in the DOM based on |
| 48 | + // where the gesture ended. Update the items variable to the |
| 49 | + // new order of items |
57 | 50 | items = detail.complete(items); |
| 51 | + |
| 52 | + // Reorder the items in the DOM |
| 53 | + reorderItems(items); |
| 54 | + |
| 55 | + // After complete is called the items will be in the new order |
58 | 56 | console.log('After complete', items); |
59 | 57 | }); |
| 58 | + |
| 59 | + function reorderItems(items) { |
| 60 | + reorderGroup.replaceChildren(); |
| 61 | + |
| 62 | + let reordered = ''; |
| 63 | + |
| 64 | + for (let i = 0; i < items.length; i++) { |
| 65 | + reordered += ` |
| 66 | + <ion-item> |
| 67 | + <ion-label> |
| 68 | + Item ${items[i]} |
| 69 | + </ion-label> |
| 70 | + <ion-reorder slot="end"></ion-reorder> |
| 71 | + </ion-item> |
| 72 | + `; |
| 73 | + } |
| 74 | + |
| 75 | + reorderGroup.innerHTML = reordered; |
| 76 | + } |
60 | 77 | </script> |
61 | 78 | </body> |
62 | 79 | </html> |
0 commit comments