Sort by date

[louptheron]

Hi,

Thank you for this great library!
I have a kanban-like columns and list of tickets ; by default when I move tickets to another column they are going to the bottom.

I would like to sort the tickets by a property (here, a date) when I move them from columns to columns.
I tried to use useSortable, but I can't figure out how to use it when I don't want to place the item in a specified location but instead I would like to place with code in the sort order.

Do you have any idea on how to do this ?

Thank you,

[clauderic]

@dnd-kit is un-opinionated as to what should happen when you drop a draggable item on a droppable container.

It's entirely up to the consumer to decide what should happen in that scenario. The examples in the storybook assume that an element should be inserted below the item you are currently over, or at the end of the list if you are over a column.

For example, you could decide to always insert items at the top of a column when you move a ticket from one column to another (either in onDragOver or onDragEnd):

onDragEnd={({active, over}) => {
  const overId = over?.id;

  if (!overId || overId === TRASH_ID || active.id in items) {
    return;
  }

  const overContainer = findContainer(overId);
  const activeContainer = findContainer(active.id);

  if (!overContainer || !activeContainer) {
    return;
  }

  if (activeContainer !== overContainer) {
    setItems((items) => {
      const activeItems = items[activeContainer];
      const overItems = items[overContainer];
      const overIndex = overItems.indexOf(overId);
      const activeIndex = activeItems.indexOf(active.id);

      return {
        ...items,
        [activeContainer]: items[activeContainer].filter(
          (item) => item !== active.id
        ),
        [overContainer]: [
          items[activeContainer][activeIndex],
          ...items[overContainer],
        ],
      };
    });
  }
}}

[louptheron]

Indeed, it was as simple as that!
Thanks!