1

I am trying to build a very simple angularjs directive that will allow me to nest jquery-ui sortable lists.

I have a pure jquery version that works but when I add in the angularjs directive code it seems to not enable any child elements with the connectWith arguement. Additionally, using the angular version, if I add a dummy <li> element in my sub-list jquery seems to recognize it as a list. I'm not sure what's causing the behavior.

Can you spot what I'm doing wrong?

Does not work without <li> element in sub-list

http://jsfiddle.net/comamitc/4hAy3/2/

Works with dummy <li> element but that element can be moved around and causes confusion.

http://jsfiddle.net/comamitc/4hAy3/3/

1
  • jsfiddle links are both broken Commented Aug 21, 2014 at 6:45

1 Answer 1

1

Angular-ui has a ui:sortable directive. You don't need jquery for this to work. Look at this fiddle

 <ul ui:sortable ng:model="list">
Sign up to request clarification or add additional context in comments.

5 Comments

The important piece here is that I should be able to nest them. I'm no expert in angular-ui but i don't think what you give me can accomplish that... jsfiddle.net/comamitc/hKYWr/1337
@comamitc, sure it can: jsfiddle.net/hKYWr/1338 The only thing that won't make you happy is that you still need a "dummy" <li> with the ng-repeat, but that's just how Angular works.
As sergey said, you can do nested list with ui:sortable. And I really recommend angular-ui, there are lots of great ui widgets ready for use with angularjs.
@SergeyK @zszep can you point me to some documentation? It doesn't register with my why (in your example) I cannot add Item2 to the List containing [Item1.A, Item1.B, Item1.C].
@comamitc The documentation can be found at github.com/angular-ui/ui-sortable

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.