Create Draggable div in React js without external library
In this tutorial we are going to create draggable <div/> in React application. Also we are not going use any external libraries for this implementation which will help you to customise this code as per your requirement. End result will look like below : Basic idea is we are going to create a wrapper with styled components, and will add actions for onMouseDown and onMouseUp . In the actions native event properties like pageX,pageY,offsetX and offsetY to calculate new positions of the draggable div. Let's create the styled wrapper first : const StyledWrapper = styled.div ` width : 200 px; height : 120 px; position : absolute; top : 40 px; left : 227 px; background - color : rgb( 0 , 0 , 0 , 0.5 ); cursor : pointer; z - index :100 ; padding - top :20 px; ` We will return this wrapper, from this component. Within that wrapper we will add other required div elements. < StyledWrapper > < div style ...