Knockout-sortable and dropping items throws console errors

Question

Purpose
My goal is to create a page where users can drag a set of predefined column names to the column headers from files they have already loaded in. The page will allow them to drag the static headers to the file headers for mapping them before we match them to our database.

Issues
All of my drops throw console errors:
- Dropping in the same array throws:
Uncaught TypeError: object is not a function
- Dropping an available header in the file headers throws:
Uncaught TypeError: Object [object Array] has no method 'remove'
- Dropping from the file headers back to the available throws:
Uncaught TypeError: object is not a function

Example
Here is the jsfiddle I am using: http://jsfiddle.net/micah0152/PrSWu/1/

More Detail
I want to be able to drag an available header and drop it above the column. Then I will need to get the association between the two when the user is satisfied (and clicks a Save button that doesn't exist yet.)

Sadly, I am stuck at the beginning. I am hoping that it is a simple problem since I am pretty new to knockout.

Thanks in advance.

Answer 1

need to wrap available headers in a ko.observableArray - took me a while to find your mistake too!

self.availableHeaders = ko.observableArray([
    new MappedHeader("Company"), 
    new MappedHeader("Address 1"), 
    new MappedHeader("Address 2"), 
    new MappedHeader("City"), 
    new MappedHeader("State"), 
    new MappedHeader("Zip"), 
    new MappedHeader("Country")
]);

edit: The error was saying that the sourceParent, the container the object is being moved from, does not have the remove() function. It doesn't have the remove function because it is not a ko.observableArray. So to fix this I wrapped the array with ko.observableArray() and now it has all the built in KO functionality.