javascript - Knockout-Sortable:从排序列表中排除项目

Question

我正在使用 knockout-sortable 对集合进行排序，并且我有一个"new"行应该始终保持为空并位于列表的底部。我可以通过检查 beforeMove 中的位置来取消这一行“之后”的掉落，但如果我能首先阻止这一行下方的区域显示为可掉落目标，那就更好了。

这可能吗？该行本身是我正在排序的集合中的一个真实元素，是我正在用 sortable: 绑定(bind)的容器中，这些东西很难改变。

<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 .我希望下降到“输入新任务”行下方是不可能的。

Answer 1

您可以使用项目 option用于此目的的 jQuery UI 可排序。

我们的想法是，您将一个类放在您实际想要排序的项目上，然后使用 items 选项来选择它们。

这个类可能来自一个计算类。您的情况下的计算可能与列表中的最后一项有关。

绑定(bind)时，它看起来像:sortable: { data: items, options: { items: '.good-items' } }

这是一个基本示例:http://jsfiddle.net/rniemeyer/mBjHN/