CODEWITHSUNDEEP
knockout.jsknockout-sortable
Rahul
Rahul

Reputation: 5774

Nested Sortable Knockoutjs, Ability to convert task in to subtask and vice versa

I am trying to make a nested sortable list (nesting up to 2 level only). I tried using RP Neimeyers sortable plugin but I need some more functionality like

  1. Sub item should be able to become parent item
  2. Parent item should be able to become sub item.
  3. If item with sub items is dragged in to any parent item, that parent item should go in to perticular parent item as sub item and it's subitems should become primary items. (not sure if this is possible)
  4. maintaing indexing for both parent and sub items..

What I have achieved so far -

  1. Indexing of parent items
  2. Dragging of parent items to change priority.

I am stuck on : 1. Maintaining indexing for sub items 2. Ability to convert main item a sub item and vice versa.

My attempt on JSFiddle : http://jsfiddle.net/83QrY/

All the code is given in KnockoutJS..

I am using self.Tasks.withIndex("Position", 0, 0); to maintain indexing. I hope someone will definitely help me on achieving this..

PS : I am not asking the solution, I want some help on achieving this. I also need to learn it :-)

Regards. RP.

Upvotes: 0

Views: 219

Answers (1)

RP Niemeyer
RP Niemeyer

Reputation: 114792

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 the SubTasks lists from being able to interoperate with the parents. So, you could remove the connectClass 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 the beforeMove callback to map arg.item to the correct format, splice it manually (using arg.TargetParent and arg.TargetIndex), then set arg.cancelDrop equal to true.
  • the withIndex extension is a way that I like to maintain the index. In the TaskModel constructor, you can create the SubTasks 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/

Upvotes: 1

Related Questions