Não é possível arrastar e soltar itens de um classificável para outro dentro de um foreach

Question

Estou usando knockout/jquery-ui/knockout-sortable.

Quero arrastar e soltar itens de um classificável para outro.Ver este plnkr por exemplo.Tente arrastar um item da primeira linha para a segunda linha.As matrizes observáveis ​​subjacentes são atualizadas, mas a IU é inconsistente.Parece que arrastar e soltar está sendo cancelado e o Knockout não está atualizando a IU como deveria.

Funciona bem quando os classificáveis ​​são especificados manualmente, mas para de funcionar quando eu os crio dentro de uma ligação foreach.Alguém sabe o que estou fazendo de errado?

O 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);
  });

A marcação:

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

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

</div>

Answer 1

O sortable plugin espera lidar com um observableArray.No seu caso, com base na forma como foreach funciona, $data na verdade, é desembrulhado na matriz subjacente.

Duas maneiras de consertar isso:

1. Usar $rawData em vez de $data (http://knockoutjs.com/documentation/binding-context.html) no sortable vinculação para vincular ao observableArray em vez de seu valor desembrulhado.

2. Use um array de objetos com uma propriedade contendo o observableArray como:

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

Então, ligue-se contra items em vez de $data.