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.8k stars 979 forks source link

How to show drop-able area #567

Open vivekmpuh opened 5 years ago

vivekmpuh commented 5 years ago

Hi

I have been using this plugin for item sorting this is really great, I wanted to show the drop zone area, like a border round the area where i want to drop the element / item.

Thanks

knarkunas commented 5 years ago

There is a function called updateBeforeSortStart where you can set local state with styling that shows border on droppable area. Example: https://codesandbox.io/s/pedantic-kare-qrn19

joelgb2194 commented 4 years ago

@knarkunas How do you show the area for where the item will be placed. Similar to your codesandbox but not around the entire list, just the 1 item

knarkunas commented 4 years ago

@joelgb2194 it already shows drop area by keeping empty space for it. No custom one can be implemented without actually changing package code as this is applied via style and transform:

Screenshot 2019-10-28 at 05 56 51