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.

Provide mouse position to collision detection algorithm

See original GitHub issue

First off just wanted to say thanks for building this! Loving it so far and I’ve barely got it working.

My goal is to implement a version of useSortable that also allows dropping something inside another target.

I’m still working on this, but I believe in order to do so, I need to use a collision detection algorithm that takes into account the position of the cursor inside the dragging item since it’s frequently the case that the draggable is over a droppable, but the cursor is not.

Any advice on how to achieve this with the existing architecture? Is the mouse position already being tracked somewhere that could be passed?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:5
  • Comments:29 (9 by maintainers)

github_iconTop GitHub Comments

claudericcommented, Jan 5, 2022

@sean-esper you can test your use-case against this WIP PR In my example, I wrote some very scrappy code to determine if there was a matching “combining” element:

const {
} = useSortable({

const newId = items[newIndex];

const [secondCollidingId, collisionRatio] =
  collisions && collisions.length > 1 ? collisions[1] : [];

const shouldCombine =
  secondCollidingId === newId &&
  collisionRatio != null &&
  id !== active?.id &&
  collisionRatio > X &&
  collisionRatio < Y;
jamesopticommented, Mar 12, 2021

UPDATE: I realized this is as simple as keeping track of mousemove and using that to determine if the current mouse position is over a given rect.

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

let currentMouse;
document.addEventListener("mousemove", (e) => {
  currentMouse = e;

const getIntersectionRatio = (entry) => {
  const { clientX, clientY } = currentMouse;
  const isWithinX =
    clientX > entry.offsetLeft && clientX < entry.offsetLeft + entry.width;
  const isWithinY =
    clientY > entry.offsetTop && clientY < entry.offsetTop + entry.height;

  if (isWithinX && isWithinY) {
    // Should compute a score to gauge how close to the center instead of a boolean
    return true;
  return false;
 * Returns the rectangle that is centermost with a given
 * rectangle in an array of rectangles.
export const mouseOverIntersection: CollisionDetection = (entries, target) => {
  const intersections =[_, entry]) =>

  // Once intersections returns a score, use that to determine the best match
  const firstIndex = intersections.findIndex(Boolean);
  if (firstIndex !== -1) {
    return entries[firstIndex][0];
  return null;
Read more comments on GitHub >

github_iconTop Results From Across the Web

Collision Detection - Happy Coding
This code stores the position (center) of the circle and its radius in variables. It then uses the dist() function to check whether...
Read more >
2D collision detection - Game development - MDN Web Docs
This algorithm works by taking the center points of the two circles and ensuring the distance between the center points are less than...
Read more >
Is it a bad idea to "map" the mouse position on the screen so ...
Is it a bad idea to "map" the mouse position on the screen so that collision detection works regardless of resolution? Ask Question....
Read more >
Flawless mouse collision detection and movement with ...
The final approach I tried was by using line segment intersections. I would define a main line from the cursor to the mouse,...
Read more >
Line/Point - Collision Detection - Jeff Thompson
A line (see note) is defined by two sets of X/Y coordinates. ... float px = 0; // point position (set by mouse)...
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