It Doesn't Work With Images

[javierjmx]

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

[javierjmx]

Wow! It works now. Thanks @yujingz.

[javierjmx]

Hi again! It would be nice to add this "issue" to the documentation. Don't you think so?

[STRML]

Agreed. I added a note to the README.

[javierjmx]

Thanks.

[TSMMark]

What do you guys think about an opt-in behavior which finds all child img elements and set draggable="false" on them?

disableImgDraggable=true or something

[sreetamdas]

Doesn't work anymore, even after adding draggable="false", is there a fix to this?

[TSMMark]

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

[JessieZheng2015]

so good~

[STRML]

Happy to address the issue if someone can reproduce it and produce a fix.

This isn't a relationship where I provide you software in exchange for money. This is a community project. If it doesn't work for your use case, either produce a good bug report, or better yet, find a way to make it work for your use case and contribute the code. That's the only way it gets better.

[vagechirkov]

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

Wow, amazing, it works! Thank you!!

[mahendrak001]

thanks