Sortable Container not detecting Sortable Item when it is dragged over unless it is dragged to the lower bottom quadrant of the container

[srahimeen]

I'm trying to use the Multiple Containers example for creating a drag and drop component with multiple columns with cards that can be dropped into any column. I want every column to have fixed height and width, so I'm setting it in the style.

Running into an issue where if I drag a Sortable Item (a card) over a Sortable Container (a column) which has a fixed height and width, it does not register the drag over event until I drag the card to the lower quadrant of the column. However, if a card exists, it seems to work fine.

This video shows the issue clearly:

https://user-images.githubusercontent.com/9031145/196030726-ee78c224-868f-47c9-83d3-b581298247c7.mp4

The code is:

https://codesandbox.io/s/dnd-kit-multi-containers-forked-sr63b5?file=/src/container.js

Any idea how to fix it and make it so the column always detects a drag over event when a card is dragged into its area so I don't have to drag it all the way to the bottom to drop it?

[imsanchez]

Did you ever find a solution?

[manuelMoraYolo]

Same issue for me. Anyone found a solution?

[bramireza]

Solution Found:

I was able to resolve the issue by implementing a custom collision detection function that combines pointer-based detection with proximity-based detection. Here’s the function I used:

const customCollisionDetection: CollisionDetection = (args) => {
  // Detects collisions based on the pointer position
  const pointerCollisions = pointerWithin(args);

  if (pointerCollisions.length > 0) {
    return pointerCollisions;
  }

  // Falls back to detecting collisions based on closest corners
  return closestCorners(args);
};

To use this in the DndContext, you can set up your component like this:

<DndContext
  {/* other props*/}
  collisionDetection={customCollisionDetection}
>
  {/* Your draggable and droppable components */}
</DndContext>