淘汰赛 & JQueryUI Drag - 是什么导致该元素不可拖动？

Question

我正在尝试在使用 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”绑定创建的。

任何人都可以找出可能导致此功能无法正常运行的原因吗？

Answer 1

foreach 的工作原理是保存元素的副本，以便在需要渲染项目时用作“模板”。因此，您设置为可拖动的元素不是由 foreach 渲染的元素。

您可以尝试确保在 applyBindings 之后调用 draggable，但这只有在您的 rooms 不是会更改的 observableArray 时才有效。渲染的任何新项目都不可拖动。

另一种选择是使用 afterRender 选项在元素上调用 draggable。

更好的方法是使用自定义绑定。它可以像这样简单：

ko.bindingHandlers.draggable = {
   init: function(element) {
       $(element).draggable();
   }
};

或者你可以做一些更好的事情，你实际上根据你的项目被删除的位置更新一个 observableArray 。

我不久前在此处写了一篇文章。在 Knockout 2.0 中，我做了一些更改来简化绑定，以便您可以在父级上使用 sortableList。

这是一个仅可排序的示例： http://jsfiddle.net/rniemeyer/DVRVQ/

这是一个在之间删除的示例列表：http://jsfiddle.net/rniemeyer/sBHaP/

Answer 2

问题是，当文档在现有元素上准备就绪时，将应用 draggable() 。 Knockout.js 将在开始时以及更新 rooms 数组时修改 HTML 并创建新元素。

您需要的是在每次渲染 room-view 时启用拖动。您可以使用 afterRender 来实现这一点。

试试这个：

<div id="room-view" >
  <ul data-bind="foreach: { data: rooms, afterRender: afterRender }">                     
    <li data-bind="text: name" class="draggable room-shape"></li>                   
  </ul>               
</div> 

<script type="text/javascript">
  // this is your already existing view-model that contains rooms, etc
  function roomsViewModel() {
    // ...

    // insert this in your view-model
    this.afterRender = function() {
      $( ".draggable" ).draggable();
    }
  }

  ko.applyBindings(new roomsViewModel());
</script>