Overriding sorting behavior about react-reorder HOT 10 OPEN

If it is passed as 60, that means the top and bottom 20% of the item would not be considered as 'sortZone`.

@oyeanuj I think passing 60 would mean that top and bottom 30% would be the only place for sorting the list i.e. top and bottom 30% should be considered as sortZone and middle 40% would be considered for drop over existing element.

from react-reorder.

@oyeanuj you'd set the data attribute on an element inside one of your items, and then it'd check for that, and check for collisions against that element, rather than the root node of an item.

from react-reorder.

Ah, I didn't realise you'd need a specific droppable area. Can't use margins between them? I guess styles should remain separate from functionality, so adding some way to configure this would be good.

Although you can achieve something similar with CSS: https://jsfiddle.net/fr7syq3d/

from react-reorder.

Actually, scratch that CSS, that'd also mean you could only drag by clicking inside the droppable area... :|

from react-reorder.

I'll have a think about possible ways to do this and try to get it into v3. :)

from react-reorder.

Yes, I realized that having a droppable area makes it configurable and more reusable, given that we anyways have a default of 100%. Also, +1 to not using CSS for this as it is really functional :)

from react-reorder.

+1 👍

from react-reorder.

@champeng Yes, you are right! I meant top and bottom would be considered sortZone and middle area would be dropZone.

@JakeSidSmith Any other thoughts since your last comment? 😄

from react-reorder.

@oyeanuj sorry, been pretty busy with other projects / new version of react-reorder.

Something I have been using a bit in v3 is data attributes for new features. I could add something that looks for data-drop-zone and checks this element for collisions if one is found. This way you can completely configure which area of your items should be allowed drops.

from react-reorder.

@JakeSidSmith Thanks for the response! So, if the attribute is set, then the library checks for collision? And then that would imply the need for some props to determine collision boundaries?

from react-reorder.