DragOverlay Not Working With Sortable Context

[LuisOsta]

Use Case
Users need to be able to move squares around specific squares (in a certain order), so I thought that using SortableContext would be both be the simplest solution that would solve my problem. I'd also love to render a 'default state' of sorts when the users are moving the objects (ie a card with a number shows up)

Problem
When using drag overlay, instead of staying where the original SortableItem was, it moves around alongside the item being moved. Do you know how I could fix this?

Here's a video of the problem

Unique.Expressions.-.Google.Chrome.2021-02-09.08-19-31.mp4

Package Information

{
    "@dnd-kit/core": "^1.0.0",
    "@dnd-kit/sortable": "^1.0.0",
}

Component In Question:

export const ScavengerHunt: React.FC<IScavengerHunt> = ({ questions }) => {
  const [activeId, setActiveId] = useState<null | string>(null);
  const [currentQuestions, setQuestions] = useState(
    questions as Array<ISHModule>
  );
  const sensors = useSensors(
    useSensor(TouchSensor),
    useSensor(MouseSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    })
  );

  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;
    const oldId = over ? over.id : "";
    setActiveId(null);
    if (active.id !== oldId) {
      setQuestions((oldQuestions) => {
        const oldIndex = oldQuestions.findIndex(
          (question) => question.id === active.id
        );
        const newIndex = oldQuestions.findIndex(
          (question) => question.id === oldId
        );

        return arrayMove(oldQuestions, oldIndex, newIndex);
      });
    }
  };

  const handleDragStart = (event: DragStartEvent) => {
    const { active } = event;
    setActiveId(active.id);
  };

  const normalizedQuestions = currentQuestions.map((question) => question.id);

  const rows = lodash.chunk(currentQuestions, 3);

  return (
    <DndContext
      sensors={sensors}
      onDragEnd={handleDragEnd}
      onDragStart={handleDragStart}
    >
      <SortableContext items={normalizedQuestions}>
        <Grid container spacing={4}>
          {rows.map((row, index) => {
            const direction = (index + 1) % 2 === 0 ? "row-reverse" : "row";

            return (
              <Grid
                container
                item
                direction={direction}
                key={index}
                spacing={4}
              >
                {row.map((question) => {
                  return (
                    <Grid item xs={4} key={question.id}>
                      <SortableItem id={question.id}>
                        <SHQuestion {...question} />
                      </SortableItem>
                    </Grid>
                  );
                })}
              </Grid>
            );
          })}
        </Grid>
      </SortableContext>
      {createPortal(
        <DragOverlay>{activeId && <p>{activeId}</p>}</DragOverlay>,
        document.body
      )}
    </DndContext>
  );
};

[clauderic]

Hey @LuisOsta,

I'm not sure I understand the problem. Can you elaborate?

The <DragOverlay> component provides a way to render a draggable overlay that is removed from the normal document flow and is positioned relative to the viewport and follows the cursor. This seems to be working as expected in the video you posted above.

As for the sortable items, they move in response to the collision detection algorithm detecting which item the drag overlay is currently over, and their position updates depending on the sorting strategy, which also seems to be working as expected in the video you posted.

[LuisOsta]

Hey @clauderic ,
Ah I think I misunderstood <DragOverlay>, I wanted to display a component in the original slot that the dragged component was in> (like a card with the index).

Everything around the sortable context works as expected, my confusion was around why the DragOverlay wasn't displaying in the original location of the SortableItem

What would be the best way to achieve that?

Edit:
I basically want something similar to the Checker on drag effect, but instead of displaying the options, it should display in the original tile.

[clauderic]

Hey @LuisOsta, to be honest I'm not really sure I understand your use-case well. Is there something that you could point me to to help me better understand what you're trying to achieve?

[clauderic]

I'm going to close this issue for now as there does not seem to be any issue with the library, but we can continue discussing here.

[alimertcakar]

I thought DragOverlay was supposed to show in the place of the item being dragged too.
However, I quickly figured out that this is not the intended case for this library as clauderic pointed out too.

You need to disable transform property of the Draggable component for the desired effect.

E.g:

const Draggable = ({...,hasDragOverlay,...}){
...
const style = {
    transform: hasDragOverlay ? "unset" : CSS.Translate.toString(transform),
  };
...
}
// set hasDragOverlay to true if you are gonna use DragOverlay

[Rudra072]

Hey I am having trouble here which is that i am just unable to move my task into another column its like they are stuck with their parent column as well as it has some weird transition when i sort my tasks into same column so ya help me out pls

2024-03-10.22-48-47.mp4