Angularjs Sortable items and categories based on json data

Question

I have this json structure:

{  
   "items":[  
      {  
         "category":"Category 1",
         "name":"01",
         "id":"46701a72410c"
      },
      {  
         "category":"Category 2",
         "name":"02",
         "id":"9a18ffe9f148"
      },
      {  
         "category":"Category 2",
         "name":"03",
         "id":"de3a49a458cc"
      },
      {  
         "category":"Category 3",
         "name":"04",
         "id":"bb06b1eec9c8"
      },
      {  
         "category":"Category 3",
         "name":"05",
         "id":"92973f4cfbfc"
      },
      {  
         "category":"Category 3",
         "name":"06",
         "id":"b06bbb86d278"
      }
   ],
   "categories":[  
      {  
         "isCollapsed":false,
         "name":"Category 1"
      },
      {  
         "isCollapsed":false,
         "name":"Category 2"
      },
      {  
         "isCollapsed":false,
         "name":"Category 3"
      }
   ]
}

and I'm trying to add sorting behavior using angularjs ui.sortable. I want both categories and items to be sortable.

I created two nested ordered lists based on this json, but I have no idea how to solve sortable settings. Is it possible for this json structure?

With these settings I solved only categories sorting to work. The problem is when items are moved (wrong positions or undefined are taken).

$scope.sortableOptionsCategories = {
    stop: function(ev, ui) {
      console.log("Category moved.");
    }
  };

$scope.sortableOptionsItems = {
  connectWith: '.items-container',
  start: function(e, ui) {
    $(this).attr('data-previndex', ui.item.index());
    console.log("Start: from position " + ui.item.index());
  },

  update: function(e, ui) {
    var newIndex = ui.item.index();
    var oldIndex = $(this).attr('data-previndex');
    $(this).removeAttr('data-previndex');
    console.log("Update: " + oldIndex + " -> " + newIndex);
  },

  stop: function(ev, ui) {
    console.log("Item moved.");
  }
};

UPDATE: Here is my code: http://codepen.io/anon/pen/LpGmeY A solution that keeps the json as it is would perfect for me, but if not possible I will accept any other solution.

Can you post this in a codepen or Plunkr including the HTML? — Mike Feltman
– Mike Feltman, Commented Sep 11, 2015 at 12:04
Can you extend and post any ui-sortable codepen samples with your code? — Joao Polo
– Joao Polo, Commented Sep 11, 2015 at 12:31

jjbskir · Accepted Answer · 2015-09-16 14:09:10Z

1

+50

Have you tried using this library - https://github.com/angular-ui-tree/angular-ui-tree

I created a jsfiddle - http://jsfiddle.net/450fk7wp/5/ - that handles the nested, sortable, draggable items.

You will have to transform your JSON so that it looks like this:

$scope.rows = [{
  "name":"Category 1",
  "columns": [
    {
     "category":"Category 1",
     "name":"01",
     "id":"46701a72410c"
    }
  ],
}, {
  "name":"Category 2",
  "columns": [
    {  
       "category":"Category 2",
       "name":"02",
       "id":"9a18ffe9f148"
    },
    {  
       "category":"Category 2",
       "name":"03",
       "id":"de3a49a458cc"
    }
  ],
}, {
  "name":"Category 3",
  "columns": [
  {  
     "category":"Category 3",
     "name":"04",
     "id":"bb06b1eec9c8"
  },
  {  
     "category":"Category 3",
     "name":"05",
     "id":"92973f4cfbfc"
  },
  {  
     "category":"Category 3",
     "name":"06",
     "id":"b06bbb86d278"
  }
  ]
}];

Just not exactly sure what type of sorting functionality you are looking for.

Hope this helps!

edited Sep 16, 2015 at 14:09

answered Sep 16, 2015 at 2:37

jjbskir

11.3k10 gold badges49 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

GhitaB Over a year ago

I will try. If someone gives me an example using my json structure I will accept his answer.

jjbskir Over a year ago

Posted example above.

GhitaB Over a year ago

Perfect. :) I will use it without dropped function. I want to have items sortable, too.

GhitaB Over a year ago

To be fixed: prevent drop categories in items lists and items in category list. I think this must be simple. I will take a look to available options.

leon.io · Accepted Answer · 2015-09-11 12:09:31Z

1

Provided I've understood this correctly you have nested lists, are you using nested ng-repeats?

If so it seems you can't do this with sortable (from https://github.com/angular-ui/ui-sortable)

ng-model is required, so that the directive knows which model to update.
ui-sortable element should only contain one ng-repeat and not any other elements (above or below).

Can you paste your HTML?

answered Sep 11, 2015 at 12:09

leon.io

2,8341 gold badge20 silver badges26 bronze badges

1 Comment

GhitaB Over a year ago

Code added. Please take a look.

Collectives™ on Stack Overflow

Angularjs Sortable items and categories based on json data

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related