Here are a few tips:
- the
connectClass
option determines which sortables can drag and drop with each other. The top-level sortable has it set to "Tasks", which prevents theSubTasks
lists from being able to interoperate with the parents. So, you could remove theconnectClass
option from the parent to allow dropping between parent/child - when you drop between parent and child, you would have to ensure that their structure was the same for binding, otherwise you would have to do some mapping. for your sample, I would probably drop the mapping plugin and create a
TaskModel
that supports all of your observable properties that you could use for Tasks and Sub-Tasks. Otherwise, you could use thebeforeMove
callback to maparg.item
to the correct format, splice it manually (usingarg.TargetParent
andarg.TargetIndex
), then setarg.cancelDrop
equal to true. - the
withIndex
extension is a way that I like to maintain the index. In theTaskModel
constructor, you can create theSubTasks
observableArray with the indexing added. Otherwise, you could have to use the mapping options of the mapping plugin to try to make that happen. - you might need some styling to help the user know whether they are dropping in the parent or child list.
- if you drop a parent with sub-tasks into an existing list of sub-tasks, then I am not sure what you want to do with the sub-tasks that existed on the original. that might be a case where you want to use
beforeMove
to extract the Sub-Tasks.
Here is a sample with the first 3 updates: http://jsfiddle.net/rniemeyer/5V3rK/