3

I'm creating a simple task manager where tasks are regrouped by steps. Therefore, many steps can have many tasks. Currently, I have my angularJS model mapped properly. What I want to do right now is to be able to reorder the divs representing the steps.

For example, if I have three steps named 1,3,2 I want to be able to drag the step 2 and move it above step 3 therefore putting them in the order 1,2,3. To do so, I would have to modify my angularJs model accordingly.

What I have currently, is that the ui is responding, I can see the step changing positions, but my the array containing all the steps stays in the same order... Is there a way to reorder this array or at least a way to get the new position of the step ?

http://plnkr.co/edit/bjsgQz?p=preview

Improve this question
1
  • 1
    please put your code here not only error Commented Feb 1, 2014 at 6:07

1 Answer 1

Reset to default
2

You may want to consider using ui-sortable; I've used it on one of my own projects for allowing drag-and-drop reordering, and it's worked rather well. I should point out that it does have a dependency on JQuery/JQueryUI (for the sortable widget), but it was worth it for us.

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

6 Comments

I used it and I can move the div around. My problem is that when I move the divs I mean when I reorder them, it is not mapped to the AngularJS model...
That's odd; when we've used it it's behaved in exactly that manner: when you move an element that is a child element of one with the ui-sortable directive (in our case the children were created using an ng-repeat), the reordering was immediately reflected in the scope. In fact, I just went to your Plunker example and am seeing the re-ordering behavior reflected in the little "scope viewer" at the bottom of the preview pane. Could this be a browser issue?
Aha! I just noticed that if you add a task to a step, it breaks.
I think I may have it: it looks like you're missing an ng-model on your sortable ng-repeat for tasks. If I add 'ng-model="step.tasks"' to that ng-repeat, the scope updates properly even after adding a task.
About the "scope viewer", are you talking about the one I created using <pre> tags ? I saw that it is reordering in Opera but not in chrome or safari on a mac...
|

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.