Es ist nicht möglich, Elemente innerhalb eines foreach per Drag & Drop von einer Sortierung in eine andere zu ziehen

Question

Ich verwende knockout/jquery-ui/knockout-sortable.

Ich möchte Elemente per Drag & Drop von einer Sortierung in eine andere ziehen.Sehen dieser plnkr Zum Beispiel.Versuchen Sie, ein Element aus der ersten Zeile in die zweite Zeile zu ziehen.Die zugrunde liegenden beobachtbaren Arrays werden aktualisiert, aber die Benutzeroberfläche ist inkonsistent.Es sieht so aus, als ob das Drag-and-Drop abgebrochen wird und Knockout die Benutzeroberfläche nicht wie vorgesehen aktualisiert.

Es funktioniert gut, wenn die sortierbaren Elemente manuell angegeben werden, aber es funktioniert nicht mehr, wenn ich sie innerhalb einer foreach-Bindung erstelle.Weiß jemand, was ich falsch mache?

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

Das Markup:

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

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

</div>

Answer 1

Der sortable Das Plugin erwartet, dass es sich um ein observableArray handelt.In Ihrem Fall, basierend auf der Art und Weise, wie das foreach funktioniert, $data wird tatsächlich in das zugrunde liegende Array entpackt.

Zwei Möglichkeiten, wie Sie das Problem beheben können:

1. Verwenden $rawData anstatt $data (http://knockoutjs.com/documentation/binding-context.html) im sortable Bindung zum Binden an das observableArray und nicht an seinen entpackten Wert.

2. Verwenden Sie ein Array von Objekten mit einer Eigenschaft, die das observableArray enthält, wie zum Beispiel:

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

Dann binden Sie dagegen items statt $data.