fix: improve drag behaviour when using handle #2407
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Ignored Deployment
|
| @@ -74,6 +74,9 @@ const addEventListeners = ( | |||
|
|
|||
| handleEl.addEventListener('mouseenter', onMouseEnter); | |||
| handleEl.addEventListener('mouseleave', onMouseLeave); | |||
| if (handle) { | |||
| el.addEventListener('mouseenter', onMouseLeave); | |||
There was a problem hiding this comment.
Question: should line 75 be on the else statement?
There was a problem hiding this comment.
Hmm I don't think it should, but I'm curious about your reasoning. We want onMouseEnter on handleEl every time - Whenever the mouse enters the element that will act as our handle, whether that's a specific "handle" or our whole element, we want it to enable the draggable state:
unleash/frontend/src/hooks/useDragItem.ts
Lines 47 to 51 in d8ffbe2
What this PR adds, is that whenever we're using the handle parameter (which means drag only on a specific "handle", not the whole element), we want to reset the draggable state when we enter (or re-enter) the container el.
So:
- Entering our
handleElshould enable the draggable state (line 75) - This applies whether we're using a specific "handle" or not; - Entering (or re-entering) the container
el, our whole element, should reset the state (line 78), but only when using a specific "handle", otherwise it breaks the default behaviour of the whole thing being draggable;
Maybe it's easier to understand if you checkout the branch and try it yourself. To toggle between "drag only on handle" and "everything draggable" you can comment this line:
There was a problem hiding this comment.
Oh! Thanks for the clarification! I didn't realize they were targeting different elements. The names didn't help, but I think it's not easy to give proper names to elements in the UI, it becomes too specific.
Fixes a small bug that caused the item to be draggable when clicking outside of the handle, when using a handle. Basically resets the draggable state when (re)entering the container.