Cannot nest elements unless parent contains at least one child

[cowwoc]

Problem:

1. Given a list of top-level nodes, I am not presented with a drop-target for nesting unless the parent already contains at least one child. In the jsbin link below, notice that you can drag-n-drop to nest under Item 1 but not under Items 2-5.

2. In my own application (this doesn't happen in the jsbin example below) I am able to nest children if I drag-n-drop from below the parent (drag upwards) but if I drag in the opposite direction I am not presented with a drop target for nesting. I am only presented with a drop target for swapping the top-level items.

JSBin/JSFiddle demonstrating the problem:

https://jsbin.com/notiyoheho/1/edit?html,js,output

[owen-m1]

Look at the code for the nested example on the SortableJS website.
It is about balancing the swapThreshold and the emptyInsertThreshold options to get a smooth nested list experience.

[cowwoc]

@owen-m1 Any chance you could add a visual demonstration similar to http://sortablejs.github.io/Sortable/#thresholds showing the balance/trade-offs between the two?

Also, I think it might be problematic that one property is specified as a percentage and the other in terms of pixels. I don't see how you could safely fine-tune these values unless they are in the same units. Is there any chance we could modify the property to use the same units, or at the very least let us override the default units so they use the same ones?

[owen-m1]

@cowwoc It would take a lot of work to make a demo, but it shouldn't be too hard to just fiddle around with the values in code to get a good balance.

I will consider adding pixel units for the swap thresholds though.

[dogawaf]

I've good results adding those 2 setting on https://jsbin.com/yogohirifo/edit?html,js,output

    invertedSwapThreshold: .2,
    emptyInsertThreshold: .2