search

clauderic / react-sortable-hoc

A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
https://clauderic.github.io/react-sortable-hoc/
MIT License
10.82k stars 983 forks source link

Conflict with react-dropzone #697

Open iamacatperson opened 4 years ago

iamacatperson commented 4 years ago

I realise that when I use react-sortable-hoc and I also have react-dropzone on the same page, the sorting doesn't work well (e.g. I cannot drag an item in between other items, I can only drag an item to the very top or to the bottom).

I guess the drag event is being triggered for both which is causing this hiccup. Is there a way to prevent this conflict?

darron1217 commented 4 years ago

Any update on this issue?

JuanLuisGarciaBorrego commented 3 years ago

Hello @iamacatperson @darron1217 It's possible to integrate adding the component <List elements ..../> inside <Dropzone ...>

<div {...getRootProps()}>
   <input {...getInputProps()}/>
   <List elements={data.fileList} .../>
</div>

Cheers!

elmehalawi commented 3 years ago

I'm having the same problem, here's a video of how react-sortable-hoc behaves when dropzone is on the same page:

https://user-images.githubusercontent.com/2058016/103432353-25bfa080-4ba3-11eb-845f-e6e1d8ae419a.mov

I'm not sure if this is a bug with react-dropzone, or with react-sortable-hoc, or if maybe the browser just can't handle both reading events?