Question

I am looking for a method to have a JQuery-like sortable list (link), but with some of the elements in fixed undraggable positions.

It’s trivial to make some elements undraggable, but their positions don’t remain fixed because the number of draggable elements above and below them can change.

To be more specific:
I have a list of 10 items in rank order. I want the user to be able to change the rank for some of the items by dragging (a la sortable list), but not change the rank of other frozen elements. The standard JQuery sortable undraggable feature allows the rank of frozen items to be changed by changing the number of elements above or below the frozen ones.

I’ve tried do this manually by “swapping” list elements when dragging. I.e., when a list element is dragged over a non-frozen element, the position of the two elements is swapped. This gives the semantics I want, but the item being dragged visibly “jumps” between its new position and the current ‘drag’ position. (I want it to remain in its current drag position; only its position in the DOM should change. But when the DOM position changes, the drag offset coordinates must be recomputed. And I don’t know how to do both the DOM position change and drag offset coordinate change atomically, preventing a redraw between the two. Currently, sometimes a redraw happens between the two, and the element visibly, albeit shortly, jumps.)

Edit
Here’s a jsfiddle showing my manual approach:
link. Play with it for a while and you’ll notice the flicker/jumping I mentioned.

Answer 1

I’ve looked at your fiddle, had another think, and here’s one way to do it using sortable: on start store the fixed index positions in the data object of each fixed item, and then on any change, move the fixed items back into place.

$(function() {   
    $('#rankings').sortable({
        axis: 'y',
        items: '.sortable',
        start: function () {
            $(this).find("li:not(.sortable)").each(function () {
                $(this).data("fixedIndex", $(this).index());
            });
        },        
        change: function () {
            $(this).find("li:not(.sortable)").each(function () {
                $(this).detach().insertAfter($("#rankings li:eq(" + ($(this).data("fixedIndex")-1) + ")"));
            });
        }
    });
});

Using a list such as:

<ol id="rankings">
    <li class="sortable">Dog</li>
    <li class="">Cat</li>
    <li class="sortable">Parrot</li>
    <li class="sortable">Gerbil</li>
    <li class="sortable">Snake</li>
    <li class="">Goldfish</li>
</ol>

Seems to work.