Move a card

Moves a card to another area, at a chosen position. This is the drag-and-drop of the interface, as one call.

POST /api/data/cardMove

Parameters

NameTypeRequiredDescription
cardIdintegeryesThe card being moved.
fromAreaIdintegeryesWhere it is now.
toAreaIdintegeryesWhere it should go.
newIndexintegeryesIts position in the target area, counting from 0.
curl -X POST "https://boards.example.com/api/data/cardMove" \
  -H "X-API-Key: $LOKALBOARDS_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "cardId": 501,
    "fromAreaId": 10,
    "toAreaId": 11,
    "newIndex": 0
  }'
const response = await fetch("https://boards.example.com/api/data/cardMove", {
  method: "POST",
  headers: {
    "X-API-Key": apiKey,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    cardId: 501,
    fromAreaId: 10,
    toAreaId: 11,
    newIndex: 0,
  }),
});

if (!response.ok) throw new Error(await response.text());

const data = await response.json();
<script setup>
const config = useRuntimeConfig();
const pending = ref(false);

async function moveCard() {
  pending.value = true;
  try {
    return await $fetch("https://boards.example.com/api/data/cardMove", {
      method: "POST",
      headers: { "X-API-Key": config.lokalBoardsKey },
      body: {
        cardId: 501,
        fromAreaId: 10,
        toAreaId: 11,
        newIndex: 0,
      },
    });
  } finally {
    pending.value = false;
  }
}
</script>

<template>
  <button :disabled="pending" @click="moveCard()">Move card</button>
</template>
import { useState } from "react";

export function Example({ apiKey }) {
  const [pending, setPending] = useState(false);

  async function moveCard() {
    setPending(true);

    const response = await fetch("https://boards.example.com/api/data/cardMove", {
      method: "POST",
      headers: {
        "X-API-Key": apiKey,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        cardId: 501,
        fromAreaId: 10,
        toAreaId: 11,
        newIndex: 0,
      }),
    });

    setPending(false);
    return response.json();
  }

  return (
    <button disabled={pending} onClick={moveCard}>
      Move card
    </button>
  );
}
<?php

$ch = curl_init('https://boards.example.com/api/data/cardMove');

curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    'X-API-Key: ' . $apiKey,
    'Content-Type: application/json',
]);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode([
    'cardId' => 501,
    'fromAreaId' => 10,
    'toAreaId' => 11,
    'newIndex' => 0,
]));

$response = json_decode(curl_exec($ch), true);
curl_close($ch);

The cards either side are renumbered in the same transaction, and everyone looking at that board sees the card move immediately — a move made through the API is not a second-class one.

To reorder a card within its own area, use /api/data/cardOrder instead.