アイテムを1つのソート可能なものから別のものにドラッグアンドドロップできない

Question

ノックアウト/ jQuery-UI /ノックアウトソート可能なものを使用しています。

アイテムを1つのソート可能にドラッグアンドドロップしたい。たとえば、このplnkr を参照してください。1つの項目を最初の行から2行目にドラッグしてみてください。基礎となる観察可能な配列は更新されますが、UIが矛盾しています。ドラッグアンドドロップがキャンセルされているように見え、ノックアウトはそれ以降のUIを更新していません。

並べ替え可能物が手動で指定されているが、Foreachバインディング内で作成したときに動作を停止します。誰かが私が間違っていることを知っていますか？

JavaScript：

  $(function() {
      viewModel = {
        firstItems : ko.observableArray(["Item 1", "Item 2", "Item 3", "Item 4"]),
        secondItems : ko.observableArray(["Item A", "Item B", "Item C", "Item D"]),
        thirdItems : ko.observableArray(["Item W", "Item X", "Item Y", "Item Z"])
      };

      viewModel.allItems = ko.observableArray([viewModel.firstItems, viewModel.secondItems, viewModel.thirdItems]);

      ko.applyBindings(viewModel);
  });

.

マークアップ：

<div id="rows" data-bind="foreach: allItems">

  <ul class="row" data-bind="sortable: $data">
    <li data-bind="text: $data"></li>
  </ul>

</div>

.

Answer 1

sortableプラグインはObservableArrayを扱うことを期待しています。foreachが機能する方法に基づいて、$dataは実際には基礎となる配列に開かれません。

あなたがそれを修正することができる2つの方法：

1. $rawData（href="http://knockoutjs.com/documentation/binding-context.html" real="nofollow"> http://knockoutjs.com/documentation/bindingの代わりに$dataを使用します-context.html

2. observableArrayを含むプロパティを持つオブジェクトの配列を使用します。

   viewModel.allItems = ko.observableArray([
       { items: viewModel.firstItems }, 
       { items: viewModel.secondItems },
       { items: viewModel.thirdItems }
   ]);
   

その後、sortableではなくitemsに対してバインドします。