jquery UI sortable with fixed elements on the end

Question

I have 2 lists, with one initially empty. I would like to have the fixed elements on the end, such that to drag an element into the empty list it ends up between the anchor elements (like bookends). But when I drag the items, they always end up after the locked elements (I am using items and 'not:' selector to exclude the anchors). and not between them:

    <ul id="list1" class="connected">
       <li class="Anchor">Top Of List 1</li>
       <li>Item 1</li>
       <li>Item 2</li>
       <li class="Anchor">Bottom Of List 1</li>
    </ul>
    <ul id="list1" class="connected">
       <li class="Anchor">Top Of List 2</li>
       <li class="Anchor">Bottom Of List 2</li>
    </ul>

    $( "#list1" )
        .sortable({ items: "li:not(.Anchor)",
             connectWith: ".connected"})...

I have a fiddle that demonstrates this: http://jsfiddle.net/97xdq0hj/

Even on JQuery UI site this seems to be broken: once you drag the items to top/bottom of fixed elements, there is no way to get them back between them.

https://jqueryui.com/sortable/#items

I also tried this with cancel on the anchors, but that still allows things to be placed outside the anchors.

The jquery sortable version I am using is v1.11.2.

Any ideas on the best way to solve this?

Answer 1

Based on reading other question, it seems there is no way to do this with the build-in functionality of sortable. I found a few examples of this problem with the variation that the locked-down item was at a particular index.

So here is the solution for the bookend format, you just add an identifier for anchor elements:

        var makeSortable=function(selector) {
                $(selector)
                    .sortable({
                        items: "li:not(.Anchor)",
                        connectWith: ".connected",
                        change: function() {
                            var list = $(this).closest('ul');
                            var topAnchor = $(list).find('.topAnchor');
                            var bottomAnchor =     $(list).find('.bottomAnchor');
                            $(list).prepend($(topAnchor).detach());
                            $(list).append($(bottomAnchor).detach());
                        }
                    });
        };
        makeSortable( "#list1" );
        makeSortable( "#list2" );

here is the revised fiddle: http://jsfiddle.net/97xdq0hj/1/

credit where credit is due, this problem led me to the idea. jQuery UI Sortable dynamic fixed items