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
Component state = id: 1 position: x: 100 y: 10 id: 2 position: x: 400 y: 200 { const containerStyle = height: 600 position: 'relative' return <DraggableContainer style=containerStyle> thisstatechildren </DraggableContainer> } ReactDOM
Prop Types
Property | Type | Default | Description |
---|---|---|---|
Container | String/Element | 'div' | The DraggableContainer will be rendered as a HTML tag or the React Component you specify |
threshold | Number | 5 | The max distance of between others and the dragging element triggering magnetic adsorption |
directions | Array | ['tt', 'bb', 'll', 'rr', 'tb', 'lr' ] | The directions you want. tt indicate the guide line will show when a element aligned with the top of the dragging element. |
activeClassName | String | 'active' | if you want to add class name for the element aligned with one you drag, use it. |
lineStyle | Object | {} | You can customize the style of auxiliary line by this option |
limit | String | true | Whether to restricts movement within the container |
Contributing
- Fork, then clone the project.
- Run the project in development mode:
$ yarn start
. - Make your changes.
- Lint the code:
$ yarn lint
- Make sure that the tests still pass:
$ yarn test
- Commit and PR.