Guide lines to better align draggable children in React
npm install react-drag-guideline
Examples available here: https://zcued.github.io/react-drag-guideline/
npm install react-drag-guideline --save
yarn
yarn add install react-drag-guideline
If you aren't using browserify/webpack, a UMD version of react-drag-guideline is available. It expects external React and ReactDOM.$3
js
import { DraggableContainer, DraggableChild } from 'react-drag-guideline'
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 (
{
this.state.children.map(({ id, position }, index) => {
const style = {
width: 100,
height: 100,
cursor: 'move',
background: '#8ce8df',
}
return (
)
})
}
)
}
}
ReactDOM.render(
`$3
| Property | Type | Default | Description |
| :-- | :-- | :-- | :-- |
| Container | String/Element | 'div' | The 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 |$3
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: