Easy drag and drop grid library for React
Installation
$ npm i easy-react-dnd
Demo
https://master.d34ix3fbmn7czh.amplifyapp.com/
Usage
The only required prop is the onItemSwitch prop. It is your responsability to update the state that renders the EasyItem components.
import React, { Component } from 'react'
import { EasyDraggable, EasyItem } from 'react-easy-dnd'
class App extends Component {
constructor(props) {
super(props)
this.state = {
itemArray: ['Test 1', 'Test 2', 'Test 3']
}
}
_handleDragStart = (key) => {
// Getting the key of the item being draged
}
_handleDragStop = (index) => {
// Getting index of final position
}
/*
* This function is required to keep persistance
*/
_handleItemSwitch = (newArray) => {
// Getting the new array of items
// Get key with newArray[index].key
let temp = []
for (const item of newArray) {
temp.push(item.key)
}
this.setState({ itemArray: temp })
}
_handleItemHover = (key, index) => {
// key and index of hovered item
}
render() {
return (
<EasyDraggable
cursor='grab'
hSpacing='10px'
vSpacing='10px'
onDragStart={this._handleDragStart}
onDragStop={this._handleDragStop}
onItemSwitch={this._handleItemSwitch} //Required
onItemHover={this._handleSwitch}
itemsPerRow={2}
>
{this.state.itemArray.map((item) => (
<EasyItem key={item}>
<div className='box'>{item}</div>
</EasyItem>
))}
</EasyDraggable>
)
}
}
export default App
EasyDraggable Props
Appearance props
prop | Type | Default value | Description |
---|---|---|---|
itemsPerRow | number | 1 | The amount of items per row (columns per rows) |
handle | HTML component | none | A handle that allow dragging from a specific point |
hSpacing | string | 0px | Horizontal spacing between items (ex:12px) |
vSpacing | string | 0px | Vertical spacing between rows (ex:12px) |
cursor | string | auto | The cursor used on drag (cursor style property, ex : grab,pointer, ...) |
Events props
prop | Type | parameter(s) | Description |
---|---|---|---|
onDragStart | funtion | The key of the item being draged | When drag starts |
onDragStop | funtion | The key of the final position | When drag stops |
onItemSwitch | funtion | The new array of items | When an item switch. This is required to keep persistance |
onItemHover | funtion | key (key of hovered item), index (index of hovered item) | When an item is hovered |
|
EasyItem Props
prop | Type | Default value | Required | Description |
---|---|---|---|---|
key | number/string | none | no | Unique id for the item |
|
Credits
Adam Pinheiro
Authors
- Adam Pinheiro
Ressources used
Icons made by Metropolicons from www.flaticon.com