Question

I have the following code:

jQuery("#wiggle-available, #wiggle-current" ).sortable({
        connectWith: ".wiggle-connect",
        items: 'li.sortable',
        placeholder: "ui-state-highlight"
}).disableSelection();

So, basically I have 2 sortable lists, between which I can transfer items. The thing is that on my second list, I want to have the first and last items not draggable & not sortable (they don’t have the sortable class, so all good there).

When the list is populated with 3+ items (the 2 fixed ones and one in between them), it works OK, but as soon as I remove that 1 item from the middle, I can’t insert anything between the 2 left items, only at the end of the list.

2 questions:
1. Is it possible to have a hack that lets me insert items between 2 non-sortable items?
2. Is it possible to disable the adding of items at the end of a list?

Answer 1

Found the solution 🙂 For anyone it might interest:

The fix was to add a sortable item (with the sortable class) between those 2 non-sortable items, with 0 height. This way the user can’t see it and can’t drag it away. The list has 3 items always, but 2 are displayed. It fixed both my issues 🙂

This might cause issues when calling .sortable("serialize") but in my case it’s not an issue, and there are workarounds for it.