docs(reorder): add reorder move playground

ionic-team · brandyscarney · Jun 23, 2025 · Jun 12, 2025 · Jun 12, 2025 · Jun 12, 2025
commit 15db7397d586274f9c89f4cafe6259d113f18848
diff --git a/docs/api/reorder.md b/docs/api/reorder.md
@@ -73,6 +73,19 @@ import UpdatingData from '@site/static/usage/v8/reorder/updating-data/index.md';
 
 <UpdatingData />
 
+## Event Handling
+
+### Using `ionReorderStart` and `ionReorderEnd`
+
+import ReorderStartEnd from '@site/static/usage/v8/reorder/reorder-start-end/index.md';
+
+<ReorderStartEnd />
+
+### Using `ionReorderMove`
+
+import ReorderMove from '@site/static/usage/v8/reorder/reorder-move/index.md';
+
+<ReorderMove />
 
 ## Usage with Virtual Scroll
 

diff --git a/static/usage/v8/reorder/reorder-move/angular/example_component_html.md b/static/usage/v8/reorder/reorder-move/angular/example_component_html.md
@@ -0,0 +1,19 @@
+```html
+<ion-list lines="full">
+  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+  <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
+  <ion-reorder-group
+    [disabled]="false"
+    (ionReorderMove)="handleReorderMove($any($event))"
+    (ionReorderEnd)="handleReorderEnd($any($event))"
+  >
+    @for (item of items; track item; let i = $index) {
+    <ion-item [id]="'item-' + (i + 1)">
+      <b slot="start">{{ i + 1 }}</b>
+      <ion-label>{{ item }}</ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+    }
+  </ion-reorder-group>
+</ion-list>
+```
diff --git a/static/usage/v8/reorder/reorder-move/angular/example_component_ts.md b/static/usage/v8/reorder/reorder-move/angular/example_component_ts.md
@@ -0,0 +1,75 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonItem,
+  IonLabel,
+  IonList,
+  IonReorder,
+  IonReorderGroup,
+  ReorderEndCustomEvent,
+  ReorderMoveCustomEvent,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
+})
+export class ExampleComponent {
+  items = ['Buy groceries', 'Call the bank', 'Finish project report', 'Book flight tickets', 'Read a book'];
+
+  handleReorderMove(event: ReorderMoveCustomEvent) {
+    const from = event.detail.from;
+    const to = event.detail.to;
+
+    // Get all items and sort by their current id (item-1, item-2, ...)
+    const itemElements = Array.from(document.querySelectorAll('ion-item')).sort((a, b) => {
+      const aNum = parseInt(a.id.replace('item-', ''), 10);
+      const bNum = parseInt(b.id.replace('item-', ''), 10);
+      return aNum - bNum;
+    });
+
+    // Dragging down: shift up items between from+1 and to, set dragged to to+1
+    if (from < to) {
+      for (let i = from; i <= to; i++) {
+        const item = itemElements[i];
+        const itemNum = item.querySelector('b');
+        if (itemNum) {
+          if (i === from) {
+            // Dragged item
+            itemNum.textContent = String(to + 1);
+            item.id = `item-${to + 1}`;
+          } else {
+            // Items shift up
+            itemNum.textContent = String(i);
+            item.id = `item-${i}`;
+          }
+        }
+      }
+      // Dragging up: shift down items between to and from-1, set dragged to to+1
+    } else if (from > to) {
+      for (let i = to; i <= from; i++) {
+        const item = itemElements[i];
+        const itemNum = item.querySelector('b');
+        if (itemNum) {
+          if (i === from) {
+            // Dragged item
+            itemNum.textContent = String(to + 1);
+            item.id = `item-${to + 1}`;
+          } else {
+            // Items shift down
+            itemNum.textContent = String(i + 2);
+            item.id = `item-${i + 2}`;
+          }
+        }
+      }
+    }
+  }
+
+  handleReorderEnd(event: ReorderEndCustomEvent) {
+    // Finish the reorder and update the items data
+    this.items = event.detail.complete(this.items);
+  }
+}
+```
diff --git a/static/usage/v8/reorder/reorder-move/demo.html b/static/usage/v8/reorder/reorder-move/demo.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Reorder</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/@ionic/core@8.6.2-dev.11749759855.198287b7/dist/ionic/ionic.esm.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@ionic/core@8.6.2-dev.11749759855.198287b7/css/ionic.bundle.css"
+    />
+
+    <style>
+      ion-list {
+        width: 300px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list lines="full">
+            <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+            <ion-reorder-group disabled="false"></ion-reorder-group>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      let items = ['Buy groceries', 'Call the bank', 'Finish project report', 'Book flight tickets', 'Read a book'];
+      const reorderGroup = document.querySelector('ion-reorder-group');
+
+      document.addEventListener('DOMContentLoaded', () => {
+        reorderItems(items);
+      });
+
+      reorderGroup.addEventListener('ionReorderMove', ({ detail }) => {
+        const from = detail.from;
+        const to = detail.to;
+
+        // Get all items and sort by their current id (item-1, item-2, ...)
+        const itemElements = Array.from(reorderGroup.querySelectorAll('ion-item')).sort((a, b) => {
+          const aNum = parseInt(a.id.replace('item-', ''), 10);
+          const bNum = parseInt(b.id.replace('item-', ''), 10);
+          return aNum - bNum;
+        });
+
+        // Dragging down: shift up items between from+1 and to, set dragged to to+1
+        if (from < to) {
+          for (let i = from; i <= to; i++) {
+            const item = itemElements[i];
+            const itemNum = item.querySelector('b');
+            if (i === from) {
+              // Dragged item
+              itemNum.textContent = to + 1;
+              item.id = `item-${to + 1}`;
+            } else {
+              // Items shift up
+              itemNum.textContent = i;
+              item.id = `item-${i}`;
+            }
+          }
+          // Dragging up: shift down items between to and from-1, set dragged to to+1
+        } else if (from > to) {
+          for (let i = to; i <= from; i++) {
+            const item = itemElements[i];
+            const itemNum = item.querySelector('b');
+            if (i === from) {
+              // Dragged item
+              itemNum.textContent = to + 1;
+              item.id = `item-${to + 1}`;
+            } else {
+              // Items shift down
+              itemNum.textContent = i + 2;
+              item.id = `item-${i + 2}`;
+            }
+          }
+        }
+      });
+
+      reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
+        // Finish the reorder and update the items data
+        items = detail.complete(items);
+
+        // Re-render the DOM to match the new order
+        reorderItems(items);
+      });
+
+      function reorderItems(items) {
+        reorderGroup.replaceChildren();
+
+        let reordered = '';
+
+        for (let i = 0; i < items.length; i++) {
+          reordered += `
+            <ion-item id="item-${i + 1}">
+              <b slot="start">${i + 1}</b>
+              <ion-label>
+                ${items[i]}
+              </ion-label>
+              <ion-reorder slot="end"></ion-reorder>
+            </ion-item>
+          `;
+        }
+
+        reorderGroup.innerHTML = reordered;
+      }
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v8/reorder/reorder-move/index.md b/static/usage/v8/reorder/reorder-move/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.html': angular_example_component_html,
+      },
+    },
+  }}
+  src="usage/v8/reorder/reorder-move/demo.html"
+  size="300px"
+/>
diff --git a/static/usage/v8/reorder/reorder-move/javascript.md b/static/usage/v8/reorder/reorder-move/javascript.md
@@ -0,0 +1,85 @@
+```html
+<ion-list lines="full">
+  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+  <ion-reorder-group disabled="false"></ion-reorder-group>
+</ion-list>
+
+<script>
+  let items = ['Buy groceries', 'Call the bank', 'Finish project report', 'Book flight tickets', 'Read a book'];
+  const reorderGroup = document.querySelector('ion-reorder-group');
+
+  reorderItems(items);
+
+  reorderGroup.addEventListener('ionReorderMove', ({ detail }) => {
+    const from = detail.from;
+    const to = detail.to;
+
+    // Get all items and sort by their current id (item-1, item-2, ...)
+    const itemElements = Array.from(reorderGroup.querySelectorAll('ion-item')).sort((a, b) => {
+      const aNum = parseInt(a.id.replace('item-', ''), 10);
+      const bNum = parseInt(b.id.replace('item-', ''), 10);
+      return aNum - bNum;
+    });
+
+    // Dragging down: shift up items between from+1 and to, set dragged to to+1
+    if (from < to) {
+      for (let i = from; i <= to; i++) {
+        const item = itemElements[i];
+        const itemNum = item.querySelector('b');
+        if (i === from) {
+          // Dragged item
+          itemNum.textContent = to + 1;
+          item.id = `item-${to + 1}`;
+        } else {
+          // Items shift up
+          itemNum.textContent = i;
+          item.id = `item-${i}`;
+        }
+      }
+      // Dragging up: shift down items between to and from-1, set dragged to to+1
+    } else if (from > to) {
+      for (let i = to; i <= from; i++) {
+        const item = itemElements[i];
+        const itemNum = item.querySelector('b');
+        if (i === from) {
+          // Dragged item
+          itemNum.textContent = to + 1;
+          item.id = `item-${to + 1}`;
+        } else {
+          // Items shift down
+          itemNum.textContent = i + 2;
+          item.id = `item-${i + 2}`;
+        }
+      }
+    }
+  });
+
+  reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
+    // Finish the reorder and update the items data
+    items = detail.complete(items);
+
+    // Re-render the DOM to match the new order
+    reorderItems(items);
+  });
+
+  function reorderItems(items) {
+    reorderGroup.replaceChildren();
+
+    let reordered = '';
+
+    for (let i = 0; i < items.length; i++) {
+      reordered += `
+        <ion-item id="item-${i + 1}">
+          <b slot="start">${i + 1}</b>
+          <ion-label>
+            ${items[i]}
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+      `;
+    }
+
+    reorderGroup.innerHTML = reordered;
+  }
+</script>
+```