portlets example

[vjkumarsw]

I have an application similar to the portlet example given in http://jqueryui.com/sortable/#portlets. Is it possible for some one to show me how to implement this with angular-ui/ui-sortable? Thanks.

[thgreasi]

I this should not be hard to implement.

• You need to create an array with objects that will represent each portlet collection.
• use the ui-sortable directive with an ng-repeat
• for the toggle effect :
  • either add an element for the header to the ng-repeat and use ng-click directly
  • or create a separate directive...

Please move this to stackoverflow or something. Feel free to add a link of your question in here for tracking.

[vjkumarsw]

This was answered in the Stack overflow on October 1st, 2015.

[thgreasi]

So, it seems that it wasn't that hard :)
Just three connected sortable lists with 33.33% width floated left.

[thgreasi]

The codepen that the stackoverflow shows, is literally a clone from connected sortables example in README that was just added an extra list.

Why this needed so much time and effort at the first place?
The diff is:

• a copy-paste of one of the ui-sortable lists and just changing list2 to list3 in ng-model
• a copy-paste of the list model array, replacing the (b) string literal to (c)
• a copy paste of the assignment of the new list to the scope and increasing both numbers by 1
  • $scope.list3 = $scope.rawScreens[2];

[vjkumarsw]

I agree with your explanation. I did not understand the approach you outlined on May 5th and was not aware the example given in README would solve my problem. My fault.
A suggestion. Giving an example of the connected listed as portlet (like the one given in http://jqueryui.com/sortable/#portlets) in the README would help newbies like me.

[thgreasi]

Opened #389 for this.