JQuery sorting weird connectWith div behavior

Question

I am trying to connect multiple mailboxes at several levels and sort them between levels using jQuery Sortable. The problem is that my current solution has weird behavior when I try to remove items at a different level.

Does anyone know a good solution for more convenient interaction between user and fields?

Here is an example of my problem: jsfiddle example Try resetting the items in the yellow box and sorting them.

Thanks!

Answer 1

I have no actual answer to your problem, but I may have a logical reason for this behavior. Since you want to sort the elements of level 1 and level2, in this case all the figures mean 1st level and put things in yellow, this is level 2, when you try to put boxes in the yellow box, the limits in both axes are too small to separate this level difference. This could be because you are using the x and y axis as a reference, so when your cursor is in the middle of the x and y axis of the outer element, it is confusing. I suggest you try the option axis: "y".