Drag and Drop Rows Table Block for React

Yes, and that is the baseline. Every row has Move up and Move down buttons named with the job ("Move Menu cards up"). Pressing one moves the job one place, keeps focus on the same button so you can press it again, and the status line says where the job is now. At the first or last place the button stays pressable and answers in words instead of doing nothing.

Pressing the grip captures the pointer on the table body; as it moves over the other rows, the dragged job takes the place of the row under it, and it stays where it is let go. It uses plain pointer events (no library), and the grip is hidden from assistive technology because the buttons already do the job. On a phone the grip is not shown and the buttons are the way.

It is never typed. A helper adds the durations of every job before a row to the 09:00 opening time, so after any move the whole column recomputes, and the line over the table gives the new end of the day.

It puts the six jobs back in the order they were booked. It is always on the page; when the queue is already in that order it is quiet and, if pressed, says so in the status line.

The grip, Copies and Duration go, the copies and minutes move under the job's name, and the position, the start time and both Move buttons stay. Nothing scrolls sideways at 320 pixels.

The queue is typed in the file and the order is plain state, so nothing is sent to a press. To save the order, send the list of ids in shift and when a drag ends in drop, and load the saved order as the starting state.