Moving items between lists/sections

[dancixx]

Hi guys, thanks for this library and the effort that you are putting into it. I have a question, is it possible to solve moving items between 2 or more sections?

I found this type def:

export type ItemDragSettings = {
  /** Controls in which directions items can be dragged beyond container bounds */
  overDrag: OverDrag;
  /** Determines whether reordering is triggered from item center or touch point */
  reorderTriggerOrigin: ReorderTriggerOrigin;
...

export type OverDrag = 'both' | 'horizontal' | 'none' | 'vertical';

Maybe this OverDrag is related to this feature?

[MatiPl01]

Hey @dancixx
If you mean moving the item between 2 different Sortable components (like 2 Sortable.Grids), there is currently no such possibility. I was thinking of adding support for this in the future, but I didn't have time for that yet.

[MateoParodi]

+1

[aik117]

+1

[wyattcuypers701x]

+1

[MatiPl01]

Hey guys!

Maybe this is not exactly what you want, because this is not essentially dragging between different lists, but you can get a similar result with a trick that I used to implement this example.

I will implement support for the real dragging between separate sortable components in the near future. I am finishing the current semester on studies in a few weeks so I hope I will have more time to work on this cool feature that many of you requested.

[dancixx]

@MatiPl01 Hey thanks for the updates. I went this way, but lets say I have the following data:

const DATA = useMemo(() => {
    if (
      !folders?.noexapp_user_workout_folders ||
      folders.noexapp_user_workout_folders.length === 0
    ) {
      return [];
    }
    const data = [] as (
      | (Omit<
          (typeof folders.noexapp_user_workout_folders)[number],
          'workouts'
        > & {workouts: number})
      | (typeof folders.noexapp_user_workout_folders)[number]['workouts'][number]
    )[];

    for (const f of folders.noexapp_user_workout_folders) {
      data.push({...omit(f, 'workouts'), workouts: f.workouts.length});

      for (const w of f.workouts) {
        data.push(w);
      }
    }
    console.log('run');
    return data;
  }, [folders?.noexapp_user_workout_folders]);
  const isFolderRow = (
    x: (typeof DATA)[number],
  ): x is Extract<(typeof DATA)[number], {workouts: number}> =>
    typeof (x as any)?.workouts === 'number';

  const isWorkoutRow = (x: (typeof DATA)[number]) => !isFolderRow(x);
  const [data, setData] = useState<(typeof DATA)[number][]>(DATA);

my onDragEnd function is the following:

onDragEnd={({data: newData, fromIndex, toIndex}) => {
            const movedItem = data[fromIndex];

            if (toIndex === 0 && isWorkoutRow(movedItem)) {
              setData(data);
              return;
            }
            setData(newData);
          }}

I try to drop back the non-separator items, if they are at index 0. How I can update the internal state of the Sortable. I assume the this new data is some internal data, but it still keep the new order.