Skip to content

Instantly share code, notes, and snippets.

@shaoshing
Last active August 29, 2015 14:25
Show Gist options
  • Save shaoshing/16a4fd0e2fb27a06d61c to your computer and use it in GitHub Desktop.
Save shaoshing/16a4fd0e2fb27a06d61c to your computer and use it in GitHub Desktop.
drag-and-drop
var Item = React.createClass({
propTypes: {
document: React.PropTypes.object.required
},
_handleDrag: function(position){
this.setState({
dragging: true,
dragPosition: position
});
},
_handleDrop: function(position){
this.setState({ dragging: false });
},
render: function(){
return (
<Draggable
zone: {this.props.document.id}
onDrag: {this._handleDrag}
onDrop: {this._handleDrop}>
<div className={this.state.dragging && "dragging"}>
Drage me please
</div>
</Draggable>
);
}
});
var Draggable = React.createClass({
propTypes: {
zone: React.PropTypes.number.required
onDrag: React.PropTypes.func.required
onDrop: React.PropTypes.func.required
},
componentDidMount: function(){
var node = React.findDOMNode(this.refs.dragTarget)
node.addEventListener("mousedown", this._handleDrage.bind(this));
},
_handleDrag: function(event){
node.addEventListener("mousemove", this._handleMove.bind(this));
node.addEventListener("mouseup", this._handleDrop.bind(this));
this.setState({
position: {x: event.clientX, y: event.clientY})
});
},
_handleMove: function(event){
this.props.onDrag(this.state.posotion)
},
_handleDrop: function(event){
},
render: function(){
// https://stackoverflow.com/questions/29568721/getting-dom-node-from-react-child-element
// https://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html
return React.cloneElement(this.props.children[0], { ref: dragTarget });
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment