#434

frontend/src/components/common/SortableColumns.tsx

@@ -14,10 +14,8 @@ const SortableColumns = ({ ids, fixed = [], name, onChange, children }: {
     ids: string[]; fixed?: string[]; name: (id: string) => { text: string; language: string }
     onChange: (ids: string[]) => void; children: (ids: string[]) => ReactNode },
 ) => {
-  const [preview, setPreview] = useState<string[] | null> (null)
   const [active, setActive] = useState<string | null> (null)
-  const latest = useRef<string[] | null> (null)
-  const lastOver = useRef<string | null> (null)
+  const drag = useRef<{ id: string; ids: string[] } | null> (null)
   const motion = useClientMotion ()
   const sensors = useSensors (
       useSensor (MouseSensor, { activationConstraint: { distance: 4 } }),
@@ -27,12 +25,11 @@ const SortableColumns = ({ ids, fixed = [], name, onChange, children }: {
     if (fixed.includes (from) || fixed.includes (to)) return current
     const source = current.indexOf (from)
     const target = current.indexOf (to)
-    return source < 0 || target < 0 ? current : arrayMove (current, source, target)
+    return source < 0 || target < 0 || source === target
+	? current : arrayMove (current, source, target)
   }
   const reset = () => {
-    latest.current = null
-    lastOver.current = null
-    setPreview (null)
+    drag.current = null
     setActive (null)
   }
   return <DndContext sensors={sensors} collisionDetection={closestCenter}
@@ -43,28 +40,20 @@ const SortableColumns = ({ ids, fixed = [], name, onChange, children }: {
           onDragCancel: () => undefined },
           screenReaderInstructions: { draggable: active == null ? '' : name (active).text } }}
       onDragStart={event => {
-        latest.current = ids
-        setPreview (ids)
-        setActive (String (event.active.id))
-      }} onDragOver={event => {
-        if (event.over == null || event.active.id === event.over.id) return
-        const target = String (event.over.id)
-        if (target === lastOver.current) return
-        latest.current = move (latest.current ?? ids, String (event.active.id), target)
-        lastOver.current = target
-        setPreview (latest.current)
+        const id = String (event.active.id)
+        drag.current = { id, ids }
+        setActive (id)
       }} onDragCancel={reset} onDragEnd={event => {
-        if (event.over != null)
-        {
-          const target = String (event.over.id)
-          const current = latest.current ?? ids
-          onChange (target === lastOver.current || target === String (event.active.id)
-              ? current : move (current, String (event.active.id), target))
-        }
+        const session = drag.current
         reset ()
+        if (session == null || event.over == null || session.id !== String (event.active.id)
+	    || session.ids.length !== ids.length
+	    || session.ids.some ((id, index) => id !== ids[index])) return
+        const next = move (ids, session.id, String (event.over.id))
+        if (next.some ((id, index) => id !== ids[index])) onChange (next)
       }}>
-    <SortableContext items={preview ?? ids} strategy={horizontalListSortingStrategy}>
-      {children (preview ?? ids)}
+    <SortableContext items={ids} strategy={horizontalListSortingStrategy}>
+      {children (ids)}
     </SortableContext>
     {typeof document !== 'undefined' && createPortal (<DragOverlay
         dropAnimation={motion.reduced ? null : {