How do I move divs around?

Question

I have a list of elements in HTML, like this:

<div>Information Div</div>
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>

What I need to do is move the Information Div around the DOM, so that it appears after whichever div the user clicks on. So, if the user clicks on Div 1, the new DOM would look like:

<div>Div 1</div>
<div>Information Div</div>
<div>Div 2</div>
<div>Div 3</div>

This is pretty easy with jQuery, but I gather direct DOM manipulation is frowned upon in Angular. Is there a way of doing this easily with AngularJS?

To add an additional twist, the Information Div should always appear above the final div, so if the user clicked Div 2 *or Div 3, the DOM would look like:

<div>Div 1</div>
<div>Div 2</div>
<div>Information Div</div>
<div>Div 3</div>

http://stackoverflow.com/questions/7354992/drag-and-drop-sortable-ngrepeats-in-angular-js — Zabba, Aug 12 '13 at 21:29

score 0 · Answer 1 · answered Aug 12 '13 at 23:31

You could have the content be in a ng-repeat. You could then add an orderBy filter to the repeat that sorts in the order you specify. You could easily add a click event to change the sort order based on the rules you defined above.

orderBy: http://docs.angularjs.org/api/ng.filter:orderBy

How do I move divs around?

1 Answers1