React-beautiful-dnd: Create addon for physics based dragging item

Created on 6 Aug 2018 · 11Comments · Source: atlassian/react-beautiful-dnd

We could implement a similar dragging system to the blog: How to fix dragging animation in UI with simple math by Nash Vail.

We could implement this as a seperate npm package for consumers to opt in. Unlike the blog which is based on mouse position we could patch the DraggingStyle > transform directly. The x,y values can be pulled out of that, and the transform can be monkey patched.
I am thinking it should be a seperate package as it makes it clear how users could consume it without making it an option. If we are happy with the experience generally we could look at pulling it into the core library

I am thinking something like this:

import {patchTransform} from '....';

class Item extends React.Component {
    render() {
        return (
            <Draggable draggableId="draggable" index={0}>
                (provided, snapshot) => (
                 <div 
                    {...provided.draggableProps} 
                    {...provided.dragHandleProps}
                    ref={provided.innerRef}
                    style={patchTransform(snapshot.isDragging, provided.draggableProps.style)
                 >
                    Drag me!
                </div>
            </Draggable>
        )
    }
}

const patchTransform = (isDragging, style) => {
  if(!isDragging) {
    return style;
  }
  if(!style.transform) {
    return style;
  }

  // pull out the x,y values from the transform
  // apply an additional rotate transform
  return patched;
}

docs 📖 help wanted 👋 improvement ⭐️

Source

alexreardon

👍3

Most helpful comment

https://github.com/rokborf/natural-drag-animation-rbdnd

rokborf on 9 Sep 2018

👍2 🎉1

All 11 comments

It probably should be a stateful component, so:

<Draggable draggableId="draggable" index={0}>
   {(provided, snapshot) => (
          <FancyDragAnimationOnSprings style={provided.draggableProps.style}>
              { style => 
        <div 
          {...provided.draggableProps} 
          {...provided.dragHandleProps}
          ref={provided.innerRef}
                  style={style}
                >
          Drag me!
        </div>
               }
       </FancyDragAnimationOnSprings>
   )}
</Draggable>