Question

I have a knockout sortable list with knockout sortable lists inside it. Essentially it is the basic ‘available student’ example (http://jsfiddle.net/rniemeyer/UdXr4/), only I want the tables to be sortable as well.

I have this working mostly, but I have a problem with being able to drag tables into other tables.

I was able to add an allowDrop function on the table list to prevent students from being dropped into the table list,

        this.isTable = function(arg) {
            return arg.sourceParent != undefined;
        };

so I was hoping to have something similar on the student lists that wouldn’t allow a table in, but for the life of me I cannot figure it out. Ive tried looking at the id, or even seeing if the gender property is available (because it should only be on students) to no avail…

Ive edited a jsfiddle to make it more similar to my situation; you’ll see if you drag a table you can drop it into another table.
http://jsfiddle.net/nYSLq/1/

Any help or suggestions would be greatly appreciated.

Answer 1

For this type of thing, a good choice is to use the connectClass option. This will help classify the type of containers that items can be dropped into.

So, you could do:

<div id="main" data-bind="sortable: { data: tables, connectClass: 'tables' }">
    <div class="table">
        <div data-bind="text: students.id"></div>
        <div class="seats" data-bind="sortable: { data: students, allowDrop: $root.isTableFull, connectClass: 'students'  }">
            <div class="student" data-bind="text: name"></div>
        </div>
    </div>
</div>

Note that the plugin, does assign that class to the appropriate elements for you.

Now, students will only sort with students and tables will only sort together.

Here is an updated fiddle with some of the unnecessary extras stripped out: http://jsfiddle.net/rniemeyer/7yA2s/