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.

[danielbyte2]

Hi, is this feature still being worked on?

I need to have sortable lists and items in them that can be dragged within the list and to another sortable list.
The sortable lists should also be able to be reordered.

[dancixx]

@danielbyte2 you can do that; there is an example of how it is possible at this moment.

[danielbyte2]

@danielbyte2 you can do that; there is an example of how it is possible at this moment.

Do you mean the TaskPlanner example?

In that example you can not re-order the lists themselves from what I can see.

[MatiPl01]

Hey @danielbyte2! I've been working on this some time ago but I haven't finished this feature yet as it turned out to be very complex to do it right. I'm afraid I won't be able to spend much time working on complex features in the near future as I came back to college and it is hard to find time for job, studies and implementing new complex features in this library (sorry).

If you want just a single-column list, then you can take a look at the example suggested by @dancixx, which should be sufficient for this simple case.

Thanks for your understanding!

[danielbyte2]

@MatiPl01 Thanks for the reply, I am very grateful for this library that you have made possible; much of my app's core functionalities relies on it!

I also understand that it's a complex feature to implement, and perhaps a lot of the code would need to be restructured which would be time-consuming.

Nontheless, this library already has many great features!
Thanks

[luca1s]

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.

@dancixx did you end up finding a solution to this? I'm running into the same issue, I don't want non-separator items to be moved above the first separator!