I tried to modify this SO post Recommended way of making React component/div draggable to work with an es6 class but none of the event bindings are firing for some reason, Im not getting any errors though. None of my logs are printing anything.
// Dragging implementation https://stackoverflow.com/questions/20926551/recommended-way-of-making-react-component-div-draggable
export default class Clip extends Component {
constructor(props) {
super(props);
this.state = {
pos: this.props.initialPos,
dragging: false,
rel: null // position relative to the cursor
};
}
/* we could get away with not having this (and just having the listeners on
our div), but then the experience would be possibly be janky. If there's
anything w/ a higher z-index that gets in the way, then you're toast,
etc.*/
componentDidUpdate(props, state) {
if (this.state.dragging && !state.dragging) {
document.addEventListener('mousemove', this.onMouseMove);
document.addEventListener('mouseup', this.onMouseUp);
} else if (!this.state.dragging && state.dragging) {
document.removeEventListener('mousemove', this.onMouseMove);
document.removeEventListener('mouseup', this.onMouseUp);
}
}
// calculate relative position to the mouse and set dragging=true
onMouseDown(e) {
console.log('onMouseDown', e);
// only left mouse button
if (e.button !== 0) return;
var pos = $(this.getDOMNode()).offset();
this.setState({
dragging: true,
rel: {
x: e.pageX - pos.left,
y: e.pageY - pos.top
}
});
e.stopPropagation();
e.preventDefault();
}
onMouseUp(e) {
console.log('onMouseUp', e);
this.setState({ dragging: false });
e.stopPropagation();
e.preventDefault();
}
onMouseMove(e) {
if (!this.state.dragging) return;
console.log('onMouseMove', e);
this.setState({
pos: {
x: e.pageX - this.state.rel.x,
y: e.pageY - this.state.rel.y
}
});
e.stopPropagation();
e.preventDefault();
}
render() {
return (
<div className="clip-component" style={ clipStyle(this.props) }>
</div>
);
}
}
