/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 votes134 views1 answer
Display image as big as possible react native
Javascript React
0 vote129 views1 answer
Const userMessage Reaction = new UserMessage Reaction({ _id: mongoose.Types.ObjectId(), userId: "USERID", userName: "TESTUSERNAME", messageId: "TESTMESSAGEID", time: "TESTTIME" });
Javascript React
3 votes129 views1 answer
React prop ytpes
Javascript React
1 vote134 views1 answer
Percentage width react native
Javascript React
0 vote122 views3 answers
Create dots in carousel react js bootraps
Javascript React
2 votes137 views1 answer
React import multiple images
Javascript React
32 votes142 views1 answer
Install react router in react app
Javascript React
1 vote167 views1 answer
How to detect onend reach of scrollview in react native
Javascript React
6 votes120 views2 answers
React in jquery
Javascript React
0 vote126 views1 answer
In whatsapp share text add a new line react
Javascript React