current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 1 down vote favorite

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/

share|improve this question
    
jsfiddle links are both broken –  Daniel Flippance Aug 21 '14 at 6:45

1 Answer 1

up vote 1 down vote

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">
share|improve this answer
    
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 Apr 18 '14 at 17:29
1  
@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. –  Sergey K Apr 18 '14 at 17:51
    
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. –  zszep Apr 18 '14 at 17:57
    
@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 Apr 18 '14 at 19:21
    
@comamitc The documentation can be found at github.com/angular-ui/ui-sortable –  zszep Apr 18 '14 at 19:35

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.