Issues with embedded images?

[mstange22]

Hi, we've been using this component for quite some time, but I just noticed some odd behavior in production.

We render a map of an array of "cards", each one is basically an image with a header and a footer.

<Card>
  <Header />
  <img />
  <Footer />
</Card>

The card behaves as expected (and as it has in the past) when dragged from the header or footer, but no longer reorders when dragged from the img (the body of the card). It appears that Reorder is competing with the standard web drag of an image. The card will never find a new home and it is still in active reorder mode when releasing the click. At first, the image moves separately from the card and then the card jumps around.

The reordering still works as expected on mobile - you can touch the image and drag the card.

Has there been anything that has changed recently that would stop the previous functionality? I don't think anything in our production code has changed.

Thanks!

[JakeSidSmith]

Hi, can you give me some more info so I can reproduce this. 🙂

In what browser(s) (and specific version) has this been experienced?
What version of react-reorder are you using?
What version of react are you using?

[mstange22]

Hi - thanks for the quick response! I just updated my original post as it appears the Card structure was not visible.

I'm seeing this in recent versions of both Chrome and Firefox:
Chrome: Version 69.0.3497.100 (Official Build) (64-bit)
Firefox Quantum: 62.0.3

react-reorder: ^3.0.0-alpha.6
react: 16.0.0

[JakeSidSmith]

Thanks. I'll try to take a look at this as soon as I can. 🙂

[mstange22]

I was able to work around the dueling drag/drop listeners by disabling the native image drag listener by adding draggable={false} prop to the img.
https://stackoverflow.com/questions/4211909/disable-dragging-an-image-from-an-html-page

[JakeSidSmith]

OOooh, nice. If you think that is a suitable fix perhaps I could just mention this in the readme?

Probably easier than programatically disabling the functionality. And presumably would allow people to continue to drag images and not reorder items (if they wished), by adding onDragStart={(event) => event.stopPropagation()} to the images of choice.

[mstange22]

Yeah, it seems like this is a suitable fix for our purposes and still gives users flexibility as you mentioned.