Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

RectIntersection is not working with draggable items inside a scrollable container

See original GitHub issue

The draggable items that are scrolled are not calculating the intersectionRatio correctly.

Please, see this code sandbox for an example:

NOTE: Try dragging the last draggable item into one droppable area.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:11
  • Comments:16 (4 by maintainers)

github_iconTop GitHub Comments

claudericcommented, Jan 9, 2021

Hey @jeserodz, seems like a legit bug, thanks for the report!

robstarbuckcommented, Oct 6, 2021

Hi I wonder if there’s an update on this ticket? The branch at #54 seems to have gone stale. I have a workaround with a different collision detector which uses the current active item rather than the collisionRect which seems to work for the meantime. Obviously not something we want to keep in our codebase however. Thanks.

import {
} from "@dnd-kit/core";

 * Returns the intersecting rectangle area between two rectangles
function getIntersectionRatio(entry: LayoutRect, active: Active): number {
  const {
    top: currentTop = 0,
    left: currentLeft = 0,
    width: currentWidth = 0,
    height: currentHeight = 0,
  } = active.rect.current.translated ?? {};

  const top = Math.max(currentTop, entry.offsetTop);
  const left = Math.max(currentLeft, entry.offsetLeft);
  const right = Math.min(
    currentLeft + currentWidth,
    entry.offsetLeft + entry.width
  const bottom = Math.min(
    currentTop + currentHeight,
    entry.offsetTop + entry.height
  const width = right - left;
  const height = bottom - top;

  if (left < right && top < bottom) {
    const targetArea = currentWidth * currentHeight;
    const entryArea = entry.width * entry.height;
    const intersectionArea = width * height;
    const intersectionRatio =
      intersectionArea / (targetArea + entryArea - intersectionArea);

    return Number(intersectionRatio.toFixed(4));

  // Rectangles do not overlap, or overlap has an area of zero (edge/corner overlap)
  return 0;

 * Returns the rectangle that has the greatest intersection area with a given
 * rectangle in an array of rectangles.
export const activeRectIntersection: CollisionDetection = ({
}) => {
  let maxIntersectionRatio = 0;
  let maxIntersectingDroppableContainer: UniqueIdentifier | null = null;

  for (const droppableContainer of droppableContainers) {
    const {
      rect: { current: rect },
    } = droppableContainer;

    if (rect) {
      const intersectionRatio = getIntersectionRatio(rect, active);

      if (intersectionRatio > maxIntersectionRatio) {
        maxIntersectionRatio = intersectionRatio;
        maxIntersectingDroppableContainer =;

  return maxIntersectingDroppableContainer;
Read more comments on GitHub >

github_iconTop Results From Across the Web

angular - can't drag items to outside of a scrollable container
I found that you need to clone to outside before scrolling but I have no idea how to do that in angular and...
Read more >
overflow-x - CSS: Cascading Style Sheets - MDN Web Docs
The box is not a scroll container, and does not start a new ... If content fits inside the padding box, it looks...
Read more >
Drag Overlay - dnd-kit – Documentation
If your draggable item is within a scrollable container, ... If you conditionally render the <DragOverlay> component, drop animations will not work.
Read more >
Drag to scroll - HTML DOM
User often uses the mouse to scroll in a scrollable container. In addition to that, some applications also allow user to scroll by...
Read more >
Dragging a draggable element out of a scrollable div - GSAP
But sadly I'm facing an issue with Draggable. ... Dragging in a non-scrollable div works flawless. ... The more negative things (issues).
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found