我正在尝试在使用Knockout.js的项目中拖动列表项.
我正在使用下面的代码,你可以看到它很简单：
<div id="room-view" >
<ul data-bind="foreach: rooms">
<li data-bind="text: name" class="draggable room-shape"></li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$( ".draggable" ).draggable();
});
</script>
“房间”的列表呈现很好,但没有一个项目是可拖动的.但是,如果我将’draggable’类应用到页面上的任何其他元素 – 它变得可拖动.即使它们是其他列表项.唯一的区别是这些列表项是通过’foreach’绑定创建的.
任何人都可以发现可能导致此功能无法正常运行？
解决方法
只要需要渲染一个项目,foreach就可以保存元素的副本作为“模板”.所以,你所做的可拖动的元素不是由foreach渲染的元素.
您可以尝试确保在applyBindings之后调用draggable,但是只有当您的房间不是observableArray发生更改时才会生效.任何渲染的新项目都不会被拖动.
另一个选择是使用afterRender选项在您的元素上调用draggable.
更好的方法是使用自定义绑定.它可以这么简单：
ko.bindingHandlers.draggable = {
init: function(element) {
$(element).draggable();
}
};
或者您可以根据您的项目被删除的位置实际更新一个observableArray更好的东西.
我写了一篇文章,而不是here.使用Knockout 2.0,我进行了一些修改以简化绑定,以便您只需在父项上使用sortableList即可.
这是一个可以排序的示例：http://jsfiddle.net/rniemeyer/DVRVQ/
以下是列表之间删除的示例：http://jsfiddle.net/rniemeyer/sBHaP/