react-draggable icon indicating copy to clipboard operation
react-draggable copied to clipboard

Jittery movement when draggable uses nodeRef, smooth movement when using handle

Open viveleroi opened this issue 1 year ago • 2 comments
trafficstars

Looks like nodeRef causes jittery movement when the handle is not a direct ancestor. For example, using the nodeRef example from the README and adding a div wrapping the target causes this issue.

We're updating draggable modal windows to use nodeRef props to avoid the console warning about findDOMNode being deprecated. Previously, we had handle set to a DOM class name and that exact class name assigned to an element inside the element.

<Draggable nodeRef={dragRef}>
  <div>
     <header className={clsx(styles.header, styles[uiVariant])} ref={dragRef}>/* content */</header>
  </div>
</Draggable>

chrome_JpWDOI93H2

With the handle approach, the movement when dragging and item was smooth and we had no issues. With the nodeRef, it's incredibly jittery. We normally have bounds and onDragStart methods but I removed those for testing and the jitter persists.

viveleroi avatar Aug 28 '24 18:08 viveleroi