/Javascript/React/Make custom draggable in react

Make custom draggable in react

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 && !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: 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 & 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))
  }
})

Source: stackoverflow.com

Similar codes

2 votes205 views2 answers
Get value of Autocomplete react
Javascript React
1 vote203 views1 answer
React redux wait for props
Javascript React
0 vote218 views1 answer
React native text area align top
Javascript React
23 votes279 views5 answers
USE ICONS IN REACT
Javascript React
0 vote262 views1 answer
Gradle error react native
Javascript React
0 vote199 views1 answer
React JSON data to display in a table
Javascript React
7 votes211 views3 answers
React route props
Javascript React
0 vote269 views3 answers
SyntaxError: /mnt/c/myAppFile/hello-rails-react/app/javascript/components/Greeting.js: Support for the experimental syntax 'jsx' isn't currently enabled rails
Javascript React
15 votes212 views2 answers
Expo react navigation
Javascript React
0 vote189 views2 answers
React toggle boolean state
Javascript React