$ npm install --save react-rr
import rr from 'react-rr'
const Chessboard = rr.Chessboard
const Chessman = rr.Chessman
class APP extends React.Component {
state = {
test: [
{ id: 'a', width: 50, height: 50, x: 0, y: 0 },
{ id: 'b', width: 100, height: 100, x: 100, y: 100 },
{ id: 'c', width: 150, height: 150, x: 200, y: 200 }
]
}
onChange = (target, data) => {
// console.log('updata position/size!', target, data)
}
onChangeStop = (target, data) => {
// console.log('stop!', target, data)
this.setState({ test: data })
}
render() {
return (
<Chessboard
onChange={this.onChange}
onChangeStop={this.onChangeStop}
limit={5}
className='custom-chessboard'
lineStyle={{ color: '#000', density: 10 }}
>
{this.state.test.map(item =>
(<Chessman
id={item.id}
key={item.id}
draggabelProps={{}}
resizableProps={{}}
defaultPosition={{ x: item.x, y: item.y }}
defaultSize={{ width: item.width, height: item.height }}>
<div className='custom-chessman'>{item.id}</div>
</Chessman>)
)}
</Chessboard>
)
}
}
.custom-chessboard {
width : 1200px;
height: 800px;
margin: 0 auto;
border: 1px solid #aaa;
}
.custom-chessman {
width : 100%;
height : 100%;
background-color: pink;
border : 1px solid #ccc;
border-radius : 2px;
}