title: How to make ko.sortable work with ko.computed
body: <p>I am using knockout and Ryan Niemeyers <a href="https://github.com/rniemeyer/knockout-sortable" rel="nofollow">ko.sortable</a>.
  My aim is to move items from one container to another. This works nice.
  However, due to other circumstances I want the observableArrays object to be drag´n´dropped to be ko.computed.</p>
  
  <p>I have a basic array containing all my elements </p>
  
  <pre><code>self.Textbatches = ko.observableArray();
  </code></pre>
  
  <p>then I have a filter version</p>
  
  <pre><code>self.TextsTypeOne = ko.computed(function(){
     return ko.utils.arrayFilter(self.Textbatches(),function(t){
         return t.type() === '1';
     });
  });
  </code></pre>
  
  <p>I have another filtered list with the texts dragging:</p>
  
  <pre><code>self.allocationableTextbatches = ko.computed(function(){
     return ko.utils.arrayFilter(self.Textbatches(),function(t){
         return t.type() === null;
     });
  });
  </code></pre>
  
  <p>Then I create my two containers with ´self.TextsTypeOne´ and  ´self.allocationableTextbatches´: </p>
  
  <pre><code>&lt;div id="allocationable-texts" class="menupanel"&gt;
      &lt;h4 class="select"&gt;Text(s) to allocate:&lt;/h4&gt;
      &lt;div class="tb-table"&gt;
          &lt;div class="tb-list" data-bind="sortable:{template:'textbatchTmpl',data:$root.allocationableTextbatches,allowDrop:true}"&gt;&lt;/div&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="TypeOne-texts" class="menupanel"&gt;
      &lt;h4 class="select"&gt;Text(s) on scene:&lt;/h4&gt;
      &lt;div class="tb-table"&gt;
          &lt;div class="tb-list" data-bind="sortable:{template:'textbatchTmpl',data:$root.TextsTypeOne,allowDrop:true}"&gt;&lt;/div&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>where</p>
  
  <pre><code>&lt;script id="textbatchTmpl" type="text/html"&gt;&lt;div class="textbatch" data-bind="click: $root.selectedText"&gt;
      &lt;span class="tb-title" data-bind="text: title"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>  </p>
  
  <p>I can easily add buttons to my template setting type to 'null' and '1' respectively, and make it work that way. However I want this to be a drag and drop feature (as well) and the ko.sortable works on the jquery-ui objects. Thus it needs ´ordinary´ ´ko.observableArrays´ and not ´ko.computed´s as it is 'splice´-ing the observableArray, and dragging and dropping results in an error "TypeError: k.splice is not a function". </p>
  
  <p>I have tried to make ´self.allocationableTextbatches´ and ´self.TextsTypeOne´ writable computed, but to no avail. </p>
  
  <p>Any help and suggestions is highly appreciable!</p>
  
  <p>Thanks in advance!</p>