search

JakeSidSmith / react-reorder

Drag & drop, touch enabled, reorderable / sortable list, React component
https://jakesidsmith.github.io/react-reorder/
MIT License
218 stars 58 forks source link

Issues with embedded images? #97

Open mstange22 opened 6 years ago

mstange22 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

mstange22 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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