Guide lines and magnetic adsorption to better align draggable elements in React
npm install react-dragline
Examples available here: https://zcued.github.io/react-dragline/
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.$3
js
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 (
{
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', 'rl', 'mh', 'mv'] | 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 | Boolean | true | Whether to restricts movement within the container |
| detectOverlap | Boolean | false | If true, then you can't drag block throw other blocks |$3
| Property | Type | Default | Description |
| :-- | :-- | :-- | :-- |
| axis | String | both | Determines which axis the draggable can move (both, x, y) |
| grid | Array | [1,1] | Specifies the x and y that dragging should snap to |$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: