Как-то у вас всё многословно и сильно переусложнено. Зачем целиком переопределять obj и несколько раз вызывать setState? - результат следующего вызова перетирает результат предыдущего, наверняка причина того, что ограничения координат не применяются, кроется где-то тут. Наверное, стоит создавать объект один раз, сразу с нужными значениями свойств, как-то так:
class App extends React.Component {
state = {
divStyle: {
display: 'flex',
alignItems: 'center',
width: '1000px',
height: '500px',
outline: '1px solid red',
position: 'relative',
},
move: {
position: 'absolute',
width: '200px',
height: '100px',
outline: '1px solid green',
left: 100,
top: 200,
},
}
handlerMouseDown = e => {
this.deltaX = e.pageX - this.ourdiv.offsetLeft;
this.deltaY = e.pageY - this.ourdiv.offsetTop;
window.addEventListener('mousemove', this.handlerMouseMove);
}
handlerMouseUp = e => {
window.removeEventListener('mousemove', this.handlerMouseMove);
}
handlerMouseMove = ({ pageX }) => {
this.setState(({ move }) => ({
move: {
...move,
left: Math.min(700, Math.max(100, pageX - this.deltaX)),
},
}));
}
render() {
return (
<div>
<div style={this.state.divStyle}>
<div
ref={ourdiv => this.ourdiv = ourdiv}
style={this.state.move}
onMouseDown={this.handlerMouseDown}
onMouseUp={this.handlerMouseUp}
></div>
</div>
</div>
);
}
}
Простой