Flex-end breaks dragging to parent element

[jjeff]

Reproduction

https://codepen.io/jjeff/pen/PozoJVQ

Scenario

SortableJS's normal behavior allows user to drag anywhere onto a Sortable list (including onto the draggable child elements) to add an element to it. However, with justify-content: flex-end; enabled on the parent Sortable element, you can no longer drag into the parent element. Dragging onto the child elements still works, but not onto the Sortable-enabled element itself.

See attached GIF and code at https://codepen.io/jjeff/pen/PozoJVQ. I can reproduce at Codesandbox if needed.

Steps to Reproduce

Summary of steps if applicable.

1. Add the following CSS targeting a series of lists in the same group:

  display: flex;
  justify-content: flex-end;

Describe the bug

Draggable child elements cannot be dragged to the parent Sortable element itself. Note that other justify-content values such as start, center, and space-around work fine.

Expected behavior

Dragging to parent should add dragged item as a child - preferably on the same end of the child list as the item was dragged.

Version

package	version
sortablejs	^1.10.2-?
@types/sortablejs	^x.x.x-? || N/A

Additional Context

[jjeff]

I've posted a bug bounty on this one, in case anyone wants some incentive to fix or help with a suitable work-around.

https://www.bountysource.com/issues/93646441-flex-end-breaks-dragging-to-parent-element

[ChaituVR]

Hi @jjeff, it is not a CSS related issue, sortable JS is not accepting items to droped before first element.. raised a pr, hopefully it will be merged soon

https://codepen.io/ChaituVR/pen/wvWbMXB?editors=0111

[jjeff]

Great! Thank you so much!

[owen-m1]

Fixed in commit 77e0481