react-dragline

Guide lines and magnetic adsorption to better align draggable elements.

Examples available here: https://zcued.github.io/react-dragline/

Installation

npm

npm install react-dragline --save

yarn

yarn add install react-dragline

If you aren't using browserify/webpack, a UMD version of react-dragline is available. It expects external React and ReactDOM.

Example

import { DraggableContainer, DraggableChild } from 'react-dragline'


class Example extends React.Component {
  state = [
    { id: 1, position: {x: 100, y: 10} },
    { id: 2, position: {x: 400, y: 200} },
  ]

  render() {
    const containerStyle = {
      height: 600,
      position: 'relative',
    }

    return (
      <DraggableContainer style={containerStyle}>
        {
          this.state.children.map(({ id, position }, index) => {
            const style = {
              width: 100,
              height: 100,
              cursor: 'move',
              background: '#8ce8df',
            }

            return (
              <DraggableChild key={id} defaultPosition={position}>
                <div style={style} />
              </DraggableChild>
            )
          })
        }
      </DraggableContainer>
    )
  }
}

ReactDOM.render(<Example />, container)

Prop Types

Contributing

1. Fork, then clone the project.
2. Run the project in development mode: $ yarn start.
3. Make your changes.
4. Lint the code: $ yarn lint
5. Make sure that the tests still pass:$ yarn test
6. Commit and PR.