Recommended way of making React component div draggable

Question

I want to make a draggable  that is  repositionable by mouse  React component  which seems to necessarily involve global state and scattered event handlers  I can do it the dirty way  with a global variable in my JS file  and could probably even wrap it in a nice closure interface  but I want to know if there s a way that meshes with React better     Also  since I ve never done this in raw JavaScript before  I d like to see how an expert does it  to make sure I ve got all the corner cases handled  especially as they relate to React     Thanks

User · Answer

I ve updated the class using refs as all the solutions I see on here have things that are no longer supported or will soon be depreciated like ReactDOM findDOMNode  Can be parent to a child component or a group of children    import React    Component   from  react    class Draggable extends Component        constructor props            super props           this myRef   React createRef            this state                 counter  this props counter              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  amp  amp   state dragging                document addEventListener  mousemove   this onMouseMove               document addEventListener  mouseup   this onMouseUp             else if   this state dragging  amp  amp  state dragging                document removeEventListener  mousemove   this onMouseMove               document removeEventListener  mouseup   this onMouseUp                           calculate relative position to the mouse and set dragging true     onMouseDown    e    gt            if  e button     0  return          let pos     left  this myRef current offsetLeft  top  this myRef current offsetTop           this setState               dragging  true              rel                    x  e pageX - pos left                  y  e pageY - pos top                                   e stopPropagation            e preventDefault               onMouseUp    e    gt            this setState   dragging  false             e stopPropagation            e preventDefault               onMouseMove    e    gt            if   this state dragging  return           this setState               pos                    x  e pageX - this state rel x                  y  e pageY - this state rel y                                   e stopPropagation            e preventDefault                render             return                lt span ref  this myRef  onMouseDown  this onMouseDown  style    position   absolute   left  this state pos x    px   top  this state pos y    px     gt                   this props children               lt  span gt                     export default Draggable

User · Answer

I implemented react-dnd  a flexible HTML5 drag-and-drop mixin for React with full DOM control   Existing drag-and-drop libraries didn t fit my use case so I wrote my own  It s similar to the code we ve been running for about a year on Stampsy com  but rewritten to take advantage of React and Flux   Key requirements I had    Emit zero DOM or CSS of its own  leaving it to the consuming components  Impose as little structure as possible on consuming components  Use HTML5 drag and drop as primary backend but make it possible to add different backends in the future  Like original HTML5 API  emphasize dragging data and not just    draggable views     Hide HTML5 API quirks from the consuming code  Different components may be    drag sources    or    drop targets    for different kinds of data  Allow one component to contain several drag sources and drop targets when needed  Make it easy for drop targets to change their appearance if compatible data is being dragged or hovered  Make it easy to use images for drag thumbnails instead of element screenshots  circumventing browser quirks    If these sound familiar to you  read on   Usage  Simple Drag Source  First  declare types of data that can be dragged   These are used to check    compatibility    of drag sources and drop targets      ItemTypes js module exports       BLOCK   block     IMAGE   image        If you don t have multiple data types  this libary may not be for you    Then  let s make a very simple draggable component that  when dragged  represents IMAGE   var   DragDropMixin     require  react-dnd        ItemTypes   require    ItemTypes     var Image   React createClass     mixins   DragDropMixin      configureDragDrop registerType            Specify all supported types by calling registerType type    dragSource   dropTarget         registerType ItemTypes IMAGE              dragSource  when specified  is   beginDrag    canDrag     endDrag didDrop           dragSource                beginDrag should return   item  dragOrigin   dragPreview   dragEffect            beginDrag               return               item  this props image                                                render                 this dragSourceFor ItemTypes IMAGE   will expand into          draggable  true  onDragStart   handled by mixin   onDragEnd   handled by mixin          return          lt img src  this props image url                 this dragSourceFor ItemTypes IMAGE     gt                  By specifying configureDragDrop  we tell DragDropMixin the drag-drop behavior of this component  Both draggable and droppable components use the same mixin   Inside configureDragDrop  we need to call registerType for each of our custom ItemTypes that component supports  For example  there might be several representations of images in your app  and each would provide a dragSource for ItemTypes IMAGE   A dragSource is just an object specifying how the drag source works  You must implement beginDrag to return item that represents the data you re dragging and  optionally  a few options that adjust the dragging UI  You can optionally implement canDrag to forbid dragging  or endDrag didDrop  to execute some logic when the drop has  or has not  occured  And you can share this logic between components by letting a shared mixin generate dragSource for them   Finally  you must use     this dragSourceFor itemType   on some  one or more  elements in render to attach drag handlers  This means you can have several    drag handles    in one element  and they may even correspond to different item types   If you re not familiar with JSX Spread Attributes syntax  check it out    Simple Drop Target  Let s say we want ImageBlock to be a drop target for IMAGEs  It s pretty much the same  except that we need to give registerType a dropTarget implementation   var   DragDropMixin     require  react-dnd        ItemTypes   require    ItemTypes     var ImageBlock   React createClass     mixins   DragDropMixin      configureDragDrop registerType         registerType ItemTypes IMAGE              dropTarget  when specified  is   acceptDrop item    enter item    over item    leave item           dropTarget            acceptDrop image                 Do something with image  for example            DocumentActionCreators setImage this props blockId  image                                     render                 this dropTargetFor ItemTypes IMAGE   will expand into          onDragEnter   handled by mixin   onDragOver   handled by mixin   onDragLeave   handled by mixin   onDrop   handled by mixin          return          lt div     this dropTargetFor ItemTypes IMAGE   gt           this props image  amp  amp             lt img src  this props image url    gt                   lt  div gt                  Drag Source   Drop Target In One Component  Say we now want the user to be able to drag out an image out of ImageBlock  We just need to add appropriate dragSource to it and a few handlers   var   DragDropMixin     require  react-dnd        ItemTypes   require    ItemTypes     var ImageBlock   React createClass     mixins   DragDropMixin      configureDragDrop registerType         registerType ItemTypes IMAGE              Add a drag source that only works when ImageBlock has an image        dragSource            canDrag               return   this props image                      beginDrag               return               item  this props image                                       dropTarget            acceptDrop image              DocumentActionCreators setImage this props blockId  image                                     render          return          lt div     this dropTargetFor ItemTypes IMAGE   gt               Add     this dragSourceFor  handlers to a nested node              this props image  amp  amp             lt img src  this props image url                     this dragSourceFor ItemTypes IMAGE     gt                   lt  div gt                  What Else Is Possible   I have not covered everything but it s possible to use this API in a few more ways    Use getDragState type  and getDropState type  to learn if dragging is active and use it to toggle CSS classes or attributes  Specify dragPreview to be Image to use images as drag placeholders  use ImagePreloaderMixin to load them   Say  we want to make ImageBlocks reorderable  We only need them to implement dropTarget and dragSource for ItemTypes BLOCK  Suppose we add other kinds of blocks  We can reuse their reordering logic by placing it in a mixin  dropTargetFor    types  allows to specify several types at once  so one drop zone can catch many different types  When you need more fine-grained control  most methods are passed drag event that caused them as the last parameter    For up-to-date documentation and installation instructions  head to react-dnd repo on Github

User · Answer

Here s a simple modern approach to this with useState  useEffect and useRef in ES6   import React    useRef  useState  useEffect   from  react   const quickAndDirtyStyle       width   200px     height   200px     background    FF9900     color    FFFFFF     display   flex     justifyContent   center     alignItems   center     const DraggableComponent        gt      const  pressed  setPressed    useState false    const  position  setPosition    useState  x  0  y  0     const ref   useRef         Monitor changes to position state and update DOM   useEffect      gt        if  ref current          ref current style transform    translate   position x px    position y px               position         Update the current position if mouse is down   const onMouseMove    event    gt        if  pressed          setPosition           x  position x   event movementX          y  position y   event movementY                       return        lt div       ref   ref         style   quickAndDirtyStyle         onMouseMove   onMouseMove         onMouseDown        gt  setPressed true          onMouseUp        gt  setPressed false    gt         lt p gt   pressed    Dragging        Press to drag    lt  p gt       lt  div gt         export default DraggableComponent

User · Answer

The answer by Jared Forsyth is horribly wrong and outdated  It follows a whole set of antipatterns such as usage of stopPropagation  initializing state from props  usage of jQuery  nested objects in state and has some odd dragging state field  If being rewritten  the solution will be the following  but it still forces virtual DOM reconciliation on every mouse move tick and is not very performant   UPD  My answer was horribly wrong and outdated  Now the code alleviates issues of slow React component lifecycle by using native event handlers and style updates  uses transform as it doesn t lead to reflows  and throttles DOM changes through requestAnimationFrame  Now it s consistently 60 FPS for me in every browser I tried   const throttle    f    gt        let token   null  lastArgs   null      const invoke        gt            f    lastArgs           token   null             const result       args    gt            lastArgs   args          if   token                token   requestAnimationFrame invoke                        result cancel        gt  token  amp  amp  cancelAnimationFrame token       return result      class Draggable extends React PureComponent        relX   0       relY   0       ref   React createRef          onMouseDown    event    gt            if  event button     0                return                    const  scrollLeft  scrollTop  clientLeft  clientTop    document body             Try to avoid calling  getBoundingClientRect  if you know the size            of the moving element from the beginning  It forces reflow and is            the laggiest part of the code right now  Luckily it s called only            once per click          const  left  top    this  ref current getBoundingClientRect            this  relX   event pageX -  left   scrollLeft - clientLeft           this  relY   event pageY -  top   scrollTop - clientTop           document addEventListener  mousemove   this  onMouseMove           document addEventListener  mouseup   this  onMouseUp           event preventDefault                 onMouseUp    event    gt            document removeEventListener  mousemove   this  onMouseMove           document removeEventListener  mouseup   this  onMouseUp           event preventDefault                 onMouseMove    event    gt            this props onMove              event pageX - this  relX              event pageY - this  relY                     event preventDefault                 update   throttle      gt            const  x  y    this props          this  ref current style transform    translate   x px    y px                 componentDidMount             this  ref current addEventListener  mousedown   this  onMouseDown           this  update               componentDidUpdate             this  update               componentWillUnmount             this  ref current removeEventListener  mousedown   this  onMouseDown           this  update cancel               render             return                lt div className  draggable  ref  this  ref  gt                   this props children               lt  div gt                      class Test extends React PureComponent       state             x  100          y  200               move    x  y    gt  this setState  x  y            you can implement grid snapping logic or whatever here             move    x  y    gt  this setState           x      x - 5    10    10   5          y      y - 5    10    10   5                      render             const  x  y    this state          return                lt Draggable x  x  y  y  onMove  this  move  gt                  Drag me              lt  Draggable gt                      ReactDOM render       lt Test   gt       document getElementById  container         and a bit of CSS   draggable          just to size it to content        display  inline-block         opaque background is important for performance        background  white         avoid selecting text while dragging        user-select  none      Example on JSFiddle

User · Answer

Here s a 2020 answer with a Hook  function useDragging       const  isDragging  setIsDragging    useState false     const  pos  setPos    useState   x  0  y  0       const ref   useRef null      function onMouseMove e        if   isDragging  return      setPos         x  e x - ref current offsetWidth   2        y  e y - ref current offsetHeight   2              e stopPropagation        e preventDefault           function onMouseUp e        setIsDragging false       e stopPropagation        e preventDefault           function onMouseDown e        if  e button     0  return      setIsDragging true        setPos         x  e x - ref current offsetWidth   2        y  e y - ref current offsetHeight   2               e stopPropagation        e preventDefault              When the element mounts  attach an mousedown listener   useEffect      gt        ref current addEventListener  quot mousedown quot   onMouseDown        return      gt          ref current removeEventListener  quot mousedown quot   onMouseDown                ref current          Everytime the isDragging state changes  assign or remove      the corresponding mousemove and mouseup handlers   useEffect      gt        if  isDragging          document addEventListener  quot mouseup quot   onMouseUp         document addEventListener  quot mousemove quot   onMouseMove         else         document removeEventListener  quot mouseup quot   onMouseUp         document removeEventListener  quot mousemove quot   onMouseMove             return      gt          document removeEventListener  quot mouseup quot   onMouseUp         document removeEventListener  quot mousemove quot   onMouseMove                isDragging       return  ref  pos x  pos y  isDragging      Then a component that uses the hook   function Draggable       const  ref  x  y  isDragging    useDragging       return        lt div       ref  ref        style            position   quot absolute quot           width  50          height  50          background  isDragging    quot blue quot     quot gray quot           left  x          top  y                gt  lt  div gt

User · Answer

I ve updated polkovnikov ph solution to React 16   ES6 with enhancements like touch handling and snapping to a grid which is what I need for a game  Snapping to a grid alleviates the performance issues   import React from  react   import ReactDOM from  react-dom   import PropTypes from  prop-types    class Draggable extends React Component       constructor props            super props           this state                 relX  0              relY  0              x  props x              y  props y                    this gridX   props gridX    1          this gridY   props gridY    1          this onMouseDown   this onMouseDown bind this           this onMouseMove   this onMouseMove bind this           this onMouseUp   this onMouseUp bind this           this onTouchStart   this onTouchStart bind this           this onTouchMove   this onTouchMove bind this           this onTouchEnd   this onTouchEnd bind this              static propTypes             onMove  PropTypes func          onStop  PropTypes func          x  PropTypes number isRequired          y  PropTypes number isRequired          gridX  PropTypes number          gridY  PropTypes number              onStart e            const ref   ReactDOM findDOMNode this handle           const body   document body          const box   ref getBoundingClientRect            this setState               relX  e pageX -  box left   body scrollLeft - body clientLeft               relY  e pageY -  box top   body scrollTop - body clientTop                         onMove e            const x   Math trunc  e pageX - this state relX    this gridX    this gridX          const y   Math trunc  e pageY - this state relY    this gridY    this gridY          if  x     this state x    y     this state y                this setState                   x                  y                             this props onMove  amp  amp  this props onMove this state x  this state y                                onMouseDown e            if  e button     0  return          this onStart e           document addEventListener  mousemove   this onMouseMove           document addEventListener  mouseup   this onMouseUp           e preventDefault               onMouseUp e            document removeEventListener  mousemove   this onMouseMove           document removeEventListener  mouseup   this onMouseUp           this props onStop  amp  amp  this props onStop this state x  this state y           e preventDefault               onMouseMove e            this onMove e           e preventDefault               onTouchStart e            this onStart e touches 0            document addEventListener  touchmove   this onTouchMove   passive  false            document addEventListener  touchend   this onTouchEnd   passive  false            e preventDefault               onTouchMove e            this onMove e touches 0            e preventDefault               onTouchEnd e            document removeEventListener  touchmove   this onTouchMove           document removeEventListener  touchend   this onTouchEnd           this props onStop  amp  amp  this props onStop this state x  this state y           e preventDefault               render             return  lt div             onMouseDown  this onMouseDown              onTouchStart  this onTouchStart              style                    position   absolute                   left  this state x                  top  this state y                  touchAction   none                             ref   div    gt    this handle   div              gt               this props children           lt  div gt            export default Draggable

User · Answer

react-draggable is also easy to use  Github   https   github com mzabriskie react-draggable  import React   Component  from  react   import ReactDOM from  react-dom   import Draggable from  react-draggable    var App   React createClass       render             return                lt div gt                   lt h1 gt Testing Draggable Windows  lt  h1 gt                   lt Draggable handle  strong  gt                       lt div className  box no-cursor  gt                           lt strong className  cursor  gt Drag Here lt  strong gt                           lt div gt You must click my handle to drag me lt  div gt                       lt  div gt                   lt  Draggable gt               lt  div gt                        ReactDOM render       lt App   gt   document getElementById  content        And my index html    lt html gt       lt head gt           lt title gt Testing Draggable Windows lt  title gt           lt link rel  stylesheet  type  text css  href  style css    gt       lt  head gt       lt body gt           lt div id  content  gt  lt  div gt           lt script type  text javascript  src  bundle js  charset  utf-8  gt  lt  script gt           lt script src  http   localhost 8080 webpack-dev-server js  gt  lt  script gt       lt  body gt   lt  html gt    You need their styles  which is short  or you don t get quite the expected behavior  I like the behavior more than some of the other possible choices  but there s also something called react-resizable-and-movable  I m trying to get resize working with draggable  but no joy so far

User · Answer

I should probably turn this into a blog post  but here s pretty solid example   The comments should explain things pretty well  but let me know if you have questions   And here s the fiddle to play with  http   jsfiddle net Af9Jt 2   var Draggable   React createClass     getDefaultProps  function          return            allow the initial position to be passed in as a prop       initialPos   x  0  y  0               getInitialState  function          return         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  function  props  state        if  this state dragging  amp  amp   state dragging          document addEventListener  mousemove   this onMouseMove        document addEventListener  mouseup   this onMouseUp        else if   this state dragging  amp  amp  state dragging          document removeEventListener  mousemove   this onMouseMove        document removeEventListener  mouseup   this onMouseUp                   calculate relative position to the mouse and set dragging true   onMouseDown  function  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  function  e        this setState  dragging  false       e stopPropagation       e preventDefault          onMouseMove  function  e        if   this state dragging  return     this setState         pos            x  e pageX - this state rel x          y  e pageY - this state rel y                    e stopPropagation       e preventDefault          render  function             transferPropsTo will merge style  amp  other props passed into our        component to also be on the child DIV      return this transferPropsTo React DOM div         onMouseDown  this onMouseDown        style            left  this state pos x    px           top  this state pos y    px                 this props children            Thoughts on state ownership  etc    Who should own what state  is an important question to answer  right from the start  In the case of a  draggable  component  I could see a few different scenarios   Scenario 1  the parent should own the current position of the draggable  In this case  the draggable would still own the  am I dragging  state  but would call this props onChange x  y  whenever a mousemove event occurs    Scenario 2  the parent only needs to own the  non-moving position   and so the draggable would own it s  dragging position  but onmouseup it would call this props onChange x  y  and defer the final decision to the parent  If the parent doesn t like where the draggable ended up  it would just not update it s state  and the draggable would  snap back  to it s initial position before dragging   Mixin or component    ssorallen pointed out that  because  draggable  is more an attribute than a thing in itself  it might serve better as a mixin  My experience with mixins is limited  so I haven t seen how they might help or get in the way in complicated situations  This might well be the best option

User · Answer

I would like to add a 3rd Scenario  The moving position is not saved in any way  Think of it as a mouse movement - your cursor is not a React-component  right   All you do  is to add a prop like  draggable  to your component and a stream of the dragging events that will manipulate the dom   setXandY  function event           DOM Manipulation of x and y on your node     componentDidMount  function         if this props draggable            var node   this getDOMNode            dragStream node  onValue this setXandY      baconjs stream             In this case  a DOM manipulation is an elegant thing  I never thought I d say this

[javascript] Recommended way of making React component/div draggable

Examples related to javascript

Examples related to reactjs

Examples related to higher-order-components