Knockout-Sortable: Exclude item from sort list

Question

I'm sorting a collection using knockout-sortable and I have a "new" row that should always remain empty and at the bottom of the list. I can cancel drops "after" this row by checking positions in beforeMove, but it would be even better if I could prevent the area below this row from appearing as a droppable target in the first place.

Is this possible? The row itself is a real element in the collection I'm sorting on and is in the container I'm binding with sortable:, and these things would be very difficult to change.

<div id="main">
    <h3>Tasks</h3>
    <div class="container" data-bind="sortable: tasks">
        <div class="item">
            <span data-bind="visible: !$root.isTaskSelected($data)">
                <a href="#" data-bind="text: name, click: $root.selectedTask"></a>
            </span>
            <span data-bind="visibleAndSelect: $root.isTaskSelected($data)">
                <input data-bind="value: name, event: { blur: $root.clearTask }" />
            </span>  
        </div>
    </div>
    <a href="#" data-bind="click: addTask">Add Task</a>
</div>

A basic sortable JSFiddle. I want dropping below the "Enter a new task" row to be impossible.

Answer 1

You can use the items option of jQuery UI's sortable for this purpose.

The idea would be that you place a class on the items that you actually want to be sortable and then use the items option to select them.

This class could be from a computed. The computed in your case could potentially be related to the last item in the list.

When you bind, it would look like: sortable: { data: items, options: { items: '.good-items' } }

Here is a basic sample: http://jsfiddle.net/rniemeyer/mBjHN/