Question

I have several sortable lists connected together, so I can drag one item from one list and put it in another. Every list also has one item at its bottom that is neither sortable nor a drop target, making it impossible to drop any items below it.

That’s the intended use, I want the excluded item at the bottom of each list to always stay at the bottom.

Problem is if I empty a list, say I drag out all of its items and place them in another list, so that all that is left is the non-sortable item. If I then drag a new item into it it will always go to the bottom, below my non-sortable, not-a-drop-target item.

Is it possible, when dropping an new item into a sortable list that only has one non-sortable, not-a-drop-target, item, to have it be placed at the top of the list?

Example code:

$('.segment ol').sortable({
  connectWith: '.segment ol',
  distance: 25,
  items: 'li:not(.disabled)'
});

HTML:

    <div class="segment">
      <ol>
        <li>word word word</li>
        <li>word word word</li>
        <li class="disabled">must stay at bottom</li>
      </ol>
    </div>
    <div class="segment">
      <ol>
        <li class="disabled">must stay at bottom</li>
      </ol>
    </div>

If you were to drag a “word word word” li to the other list it would get appended below the disabled li.

Answer 1

You can use the “receive” event on the sortable list (when you supply options), and do something like this:

$('.segment ol').sortable({
    connectWith: '.segment ol',
    distance: 25,
    items: 'li:not(.disabled)',
    over: function(event,ui){ ui.placeholder.insertBefore($(this).children('li.disabled:first')); }
});

That will make the currently dragged element prepend itself onto the list (prepend and prependTo will effectively move an item unless you clone it first).