javascript - jquery UI sortable with fixed elements on the end -

i have 2 lists, 1 empty. have fixed elements on end, such drag element empty list ends between anchor elements (like bookends). when drag items, end after locked elements (i using items , 'not:' selector exclude anchors). , 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 fiddle demonstrates this: http://jsfiddle.net/97xdq0hj/

even on jquery ui site seems broken: once drag items top/bottom of fixed elements, there no way them between them.

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

i tried cancel on anchors, still allows things placed outside anchors.

the jquery sortable version using v1.11.2.

any ideas on best way solve this?

based on reading other question, seems there no way build-in functionality of sortable. found few examples of problem variation locked-down item @ particular index.

so here solution bookend format, add identifier 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 revised fiddle: http://jsfiddle.net/97xdq0hj/1/

credit credit due, problem led me idea. jquery ui sortable dynamic fixed items