Support horizontal sorting in sortable transform algorithm.

The new approach directly uses target droppable layout
positions in order to calculate sorted transforms (which
is more flexible and simpler).

Note: Requires sorted items to be the same size to avoid
odd visual behaviour as items are not currently scaled at
all (though that may be implemented in future). This was
also true of the previous algorithm.

Author: martinpengellyphillips

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [Unreleased]
+
+### Added
+
+- Support horizontal sorting in sortable transform algorithm. The new approach
+  directly uses target droppable layout positions in order to calculate sorted
+  transforms (which is more flexible and simpler).
+
+  Note: Requires sorted items to be the same size to avoid odd visual behaviour
+  as items are not currently scaled at all (though that may be implemented in
+  future). This was also true of the previous algorithm.
+
 ## [0.5.0] - 2022-04-30
 
 A significant update with multiple improvements and some breaking changes. Most

src/create-sortable.ts

@@ -21,7 +21,7 @@ const createSortable = (
   id: string | number,
   data: Record<string, any> = {}
 ): Sortable => {
-  const [dndState, { anyDraggableActive, displace }] = useDragDropContext()!;
+  const [dndState, { displace }] = useDragDropContext()!;
   const [sortableState] = useSortableContext()!;
   const draggable = createDraggable(id, data);
   const droppable = createDroppable(id, data);
@@ -37,36 +37,15 @@ const createSortable = (
     const resolvedInitialIndex = initialIndex();
     const resolvedCurrentIndex = currentIndex();
 
-    if (
-      !anyDraggableActive() ||
-      resolvedCurrentIndex === resolvedInitialIndex
-    ) {
-      return delta;
-    }
-
-    const draggableId = dndState.active.draggable!;
-    const draggableInitialIndex = sortableState.initialIds.indexOf(draggableId);
-    const draggableLayout = layoutById(draggableId)!;
+    if (resolvedCurrentIndex !== resolvedInitialIndex) {
+      const currentLayout = layoutById(id);
+      const targetLayout = layoutById(
+        sortableState.initialIds[resolvedCurrentIndex]
+      );
 
-    if (draggable.isActiveDraggable) {
-      const droppableId = dndState.active.droppable!;
-      const droppableLayout = layoutById(droppableId)!;
-      if (resolvedCurrentIndex > resolvedInitialIndex) {
-        delta.y = droppableLayout.bottom - draggableLayout.bottom;
-      } else {
-        delta.y = droppableLayout.top - draggableLayout.top;
-      }
-    } else {
-      if (resolvedCurrentIndex > resolvedInitialIndex) {
-        const leadingId = sortableState.initialIds[draggableInitialIndex - 1];
-        const leadingLayout = layoutById(leadingId)!;
-        const leadingGap = draggableLayout.top - leadingLayout.bottom;
-        delta.y += draggableLayout.height + leadingGap;
-      } else {
-        const trailingId = sortableState.initialIds[draggableInitialIndex + 1];
-        const trailingLayout = layoutById(trailingId)!;
-        const trailingGap = trailingLayout.top - draggableLayout.bottom;
-        delta.y -= draggableLayout.height + trailingGap;
+      if (currentLayout && targetLayout) {
+        delta.x = targetLayout.x - currentLayout.x;
+        delta.y = targetLayout.y - currentLayout.y;
       }
     }
 
@@ -125,6 +104,6 @@ const createSortable = (
   ) as unknown as Sortable;
 
   return sortable;
-};
+};;;;;;;
 
 export { createSortable };