JSFiddle - React, Tailwind, and code Playground

by Vladimir Kutepov

Babel + JSX

function getTestItems() {
  return [
    {order: 4, name: 'apple'},
    {order: 5, name: 'melon'},
    {order: 7, name: 'grape'},
    {order: 8, name: 'peach'}
  ];
}

function move(oldIndex, newIndex) {
  const items = getTestItems();
  const sourceItem = items[oldIndex];
  const targetItem = items[newIndex];
  const oldOrder = sourceItem.order;
  const newOrder = targetItem.order;

  const min = Math.min(oldIndex, newIndex);
  const max = Math.max(oldIndex, newIndex);
  const shift = oldIndex > newIndex ? 1 : -1;
  sourceItem.order = newOrder;

  items.forEach((item, index) => {
    if (index > min && index < max || index === newIndex) {
      item.order += shift;
    }
  });
  
  items.splice(oldIndex, 1);
  items.splice(newIndex, 0, sourceItem);

  return items;
}

assert(
  getTestItems(),
  [
    {order: 4, name: 'apple'},
    {order: 5, name: 'melon'},
    {order: 7, name: 'grape'},
    {order: 8, name: 'peach'}
  ]
);

assert(
  move(0, 2),
  [
    {order: 4, name: 'melon'},
    {order: 6, name: 'grape'},
    {order: 7, name: 'apple'},
    {order: 8, name: 'peach'}
  ]
);

assert(
  move(3, 0),
  [
    {order: 4, name: 'peach'},
    {order: 5, name: 'apple'},
    {order: 6, name: 'melon'},
    {order: 8, name: 'grape'}
  ]
);

function assert(actual, expect) {
  const fail = actual.some((item, index) =>
    item.name !== expect[index].name ||
    item.order !== expect[index].order);

  document.body.innerHTML += fail ?
    `<p style="color:red">Test fail!
     <br>${JSON.stringify(actual)} - actual
     <br>${JSON.stringify(expect)} - expected</p>` :
    '<p style="color:green">Test success!</p>';
}