Overriding sorting behavior

[oyeanuj]

Hi @JakeSidSmith, sorry, I forgot to create an issue to continue our discussion in #71 but here it is now :)

To recap, in my use case, if a user drops an item in between others, it sorts the list but if the item is dropped on top of another, I can perform a different operation. So, to do this, I would need to know if an item is dropped on top of another ( or within certain boundaries of the new item and then not calculate new position in this case), or above or below the other (calculate new position in this case).

So, as I see it, the cleanest way, in terms of API might look something like this -

1. A prop, lets say sortZoneLimitPercent passed to Reorder that indicates what % area of the item to limit the dropzone to. So, by default, today that is 100%. If it is passed as 60, that means the top and bottom 20% of the item would not be considered as 'sortZone`.

2. An additional prop added to onReorder and onReorderGroup callback that indicates whether the item was dropped within the boundaries of an item, or outside, i.e. if sortZone is true or not.

Thoughts?

[JakeSidSmith]

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/

[JakeSidSmith]

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

[JakeSidSmith]

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

[oyeanuj]

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 :)

[champeng]

+1 👍

[champeng]

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.

[oyeanuj]

@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? 😄

[JakeSidSmith]

@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.

[oyeanuj]

@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?

[JakeSidSmith]

@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.