moveElement

import { moveElement } from 'cx/data';

moveElement moves an element from one position to another within an array, shifting other elements accordingly.

 <div controller={PageController}>
  <Grid
    records={m.items}
    selection={{ type: KeySelection, bind: m.selectedId, keyField: "id" }}
    columns={[
      { header: "ID", field: "id", align: "center" },
      { header: "Name", field: "name" },
    ]}
  />
  <div style="margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap">
    <Button onClick="moveUp">Move Up</Button>
    <Button onClick="moveDown">Move Down</Button>
    <Button onClick="moveToTop">Move to Top</Button>
    <Button onClick="moveToBottom">Move to Bottom</Button>
    <Button onClick="reset">Reset</Button>
  </div>
</div> 
 class PageController extends Controller {
  onInit() {
    this.store.set(m.items, [
      { id: 1, name: "First" },
      { id: 2, name: "Second" },
      { id: 3, name: "Third" },
      { id: 4, name: "Fourth" },
      { id: 5, name: "Fifth" },
    ]);
    this.store.set(m.selectedId, 1);
  }

  getSelectedIndex() {
    const items = this.store.get(m.items);
    const selectedId = this.store.get(m.selectedId);
    return items.findIndex((item) => item.id === selectedId);
  }

  moveUp() {
    const index = this.getSelectedIndex();
    if (index > 0) {
      this.store.update(m.items, (items) => moveElement(items, index, index - 1));
    }
  }

  moveDown() {
    const index = this.getSelectedIndex();
    const items = this.store.get(m.items);
    if (index >= 0 && index < items.length - 1) {
      this.store.update(m.items, (items) => moveElement(items, index, index + 2));
    }
  }

  moveToTop() {
    const index = this.getSelectedIndex();
    if (index > 0) {
      this.store.update(m.items, (items) => moveElement(items, index, 0));
    }
  }

  moveToBottom() {
    const index = this.getSelectedIndex();
    const items = this.store.get(m.items);
    if (index >= 0 && index < items.length - 1) {
      this.store.update(m.items, (items) => moveElement(items, index, items.length));
    }
  }

  reset() {
    this.onInit();
  }
} 
 interface Item {
  id: number;
  name: string;
}

interface Model {
  items: Item[];
  selectedId: number;
}

const m = createModel<Model>(); 
 import { moveElement, createModel } from "cx/data";
import { Controller, KeySelection } from "cx/ui";
import { Button, Grid } from "cx/widgets"; 

ID	Name
1	First
2	Second
3	Third
4	Fourth
5	Fifth

Signature

function moveElement<T>(
  array: T[],
  sourceIndex: number,
  targetIndex: number,
): T[];

Parameters

Parameter	Type	Description
`array`	`T[]`	The array to modify.
`sourceIndex`	`number`	Index of the element to move.
`targetIndex`	`number`	Target position (element will be placed before this index).

Return Value

Returns a new array with the element moved. Returns the original array if source and target are the same.

Examples

Move element forward

const items = ["a", "b", "c", "d", "e"];
const result = moveElement(items, 1, 4);
// ["a", "c", "d", "b", "e"]
// "b" moved from index 1 to before index 4

Move element backward

const items = ["a", "b", "c", "d", "e"];
const result = moveElement(items, 3, 1);
// ["a", "d", "b", "c", "e"]
// "d" moved from index 3 to index 1

Move to beginning

const items = ["a", "b", "c", "d"];
const result = moveElement(items, 2, 0);
// ["c", "a", "b", "d"]

Move to end

const items = ["a", "b", "c", "d"];
const result = moveElement(items, 0, 4);
// ["b", "c", "d", "a"]