# moveElement

```ts
import { moveElement } from 'cx/data';
```


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

```tsx
import { moveElement, createModel } from "cx/data";
import { Controller, KeySelection } from "cx/ui";
import { Button, Grid } from "cx/widgets";

interface Item {
  id: number;
  name: string;
}

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

const m = createModel<Model>();

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();
  }
}

export default (
  <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>
);

```

## Signature

```ts
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

```ts
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

```ts
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

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

### Move to end

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

## See Also

- [insertElement](/docs/utilities/insert-element) - Insert new elements at position
- [updateArray](/docs/utilities/update-array) - Update and reorder items