Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Drag and Resize Component
import React from "react"
import { DragDropContainer } from 'react-drag-drop-container';
import { Resizable, ResizableBox } from 'react-resizable';
export default class DragAndResize extends React.Component {
constructor(props) {
super(props)
this.state = {
noDragging:false,
clipperWidth:100,
maxWidth:-1,
};
this.startX = null;
}
componentDidMount() {}
componentWillReceiveProps(np) {}
onDragStart(dragData){
console.log("onDragStart");
this.setState({noDragging:false})
}
onDrag(dragData, currentTarget, x, y){
if(this.startX === null){
this.startX = x;
}
//this.refs.dc => clipper Box
//this.refs.dc.parentElement => ResizableBox
//this.refs.dc.parentElement.parentElement => DragDropContainer
//this.refs.dc.parentElement.parentElement.parentElement => True Parent from other component
var parentComponent = this.refs.dc.parentElement.parentElement.parentElement;
var dragContainer = this.refs.dc.parentElement.parentElement;
var clientWidth= parentComponent.clientWidth;//860;//672
var maxLeft = clientWidth-this.refs.dc.parentElement.clientWidth;
var offsetLeft = this.refs.dc.parentElement.parentElement.offsetLeft;
//console.log("onDrag",dragData,currentTarget,x,y);
//console.log("this.refs.dc.parentElement.offsetLeft",this.refs.dc.parentElement.offsetLeft,this.refs.dc.parentElement.clientWidth);
//console.log("this.refs.dc.parentElement.parentElement",this.refs.dc.parentElement.parentElement.clientWidth);
//console.log("dragContainer.style.left",dragContainer.style.left,offsetLeft);
var maxWidth = clientWidth-offsetLeft;
this.setState({maxWidth});
if(offsetLeft < 0){
if(this.startX - x > 0){ //moving <- left so stop it, else continue so we don't get stuck
this.setState({noDragging:true})
}
}
if(offsetLeft > maxLeft){
if(this.startX - x < 0){ //moving -> right so stop it, else continue so we don't get stuck
this.setState({noDragging:true})
}
}
}
onDragEnd(dragData, currentTarget, x, y){
console.log("onDragEnd");
this.startX = null;
this.setState({noDragging:false})
}
onResize(event, {element, size}) {
this.setState({clipperWidth: size.width});
}
onResizeStart(event, data){
console.log("onResizeStart");
this.setState({noDragging:true});
}
onResizeStop(event,data){
console.log("onResizeStop");
this.setState({noDragging:false});
}
render() {
let maxWidth = this.state.maxWidth;
if(maxWidth == -1 && this.refs.dc && this.refs.dc.parentElement.parentElement.parentElement.clientWidth){
maxWidth = this.refs.dc.parentElement.parentElement.parentElement.clientWidth;
}
return (
<DragDropContainer xOnly={true} noDragging={this.state.noDragging}
onDrag={this.onDrag.bind(this)}
onDragStart={this.onDragStart.bind(this)}
onDragEnd={this.onDragEnd.bind(this)}
>
<ResizableBox width={this.state.clipperWidth} height={30} axis={"x"}
maxConstraints={[maxWidth, 30]}
onResize={this.onResize.bind(this)}
onResizeStart={this.onResizeStart.bind(this)}
onResizeStop={this.onResizeStop.bind(this)}
>
<div ref="dc" id={this.props.id?this.props.id:""} className={"tl-drag-and-resize "+(this.props.className?this.props.className:"")}
style={{width:this.state.clipperWidth+"px"}}>
</div>
</ResizableBox>
</DragDropContainer>
)
}
}
module.exports = DragAndResize
.tl-drag-and-resize{
background: rgba(255,0,0,0.3);
height: 30px;
width: 100%;
}
/***** https://github.com/STRML/react-resizable ******/
.react-resizable {
position: relative;
}
.react-resizable-handle {
position: absolute;
width: 20px;
height: 100%;
bottom: 0;
right: 0;
border-right: 4px solid #F00;
background-repeat: no-repeat;
background-origin: content-box;
box-sizing: border-box;
cursor: e-resize;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.