It Doesn't Work With Images

var Floorplan = React.createClass({

  render: function() {
    var allBoothKeys = Object.keys(this.props.booths)
      , self = this
      , booths

    if (allBoothKeys.length < 1) return null

    booths = allBoothKeys.map(function(key) {
      return (<Booth key={key} booth={self.props.booths[key]} />)
    })

    return (
      <Draggable
        start={{ x: 0, y: 0 }}
      >
        <div>
          {booths}
        </div>
      </Draggable>
    )
  }
})

Works. But if, inside div, I add

<img id="layout" src="img/layout.png" />

Does something weird: the drag starts on mouse up and I have to click again to stop the drag.

[yujingz]

It’s because of the default HTML5 drag API. if you change your img tag to

<img id="layout" draggable="false" src="img/layout.png" />

it should work as expected

[TSMMark]

@sreetamdas You could use a better package like https://github.com/clauderic/react-sortable-hoc