Angular UI Sortable get index after updated

Question

I really dislike how angular-ui is documented. Sometimes they really don't explain a lot. This is the documentation to sortable-ui: https://github.com/angular-ui/ui-sortable

First, I cannot pass in options.

$scope.sortableOptions = {
    cursor:"move"
};

I also changed "move" to "pointer" or "crosshair". Nothing happens.

Second, I need to update the backend by the new order of which the user has sorted. I am not a great javascripter at all (more of a back end developer). The only order-related js function I can find is indexof(). Then it gets very complicated because I need to iterate through all elements and find the new order since the user has rearranged all the elements.

Is there an easier way to get the current order of the list whenever the sortable directive is updated?

I created a demo on plunker (since it allows me to add extra libraries)

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

Again the cursor part is not working, and I have no idea how to get the order of these items.

I see there are methods on the Sortable UI page...I'm new to angularJS. I just couldn't figure out how to call these methods within AngularJS code.

Seralize method/toArray might not be a good idea..The actual data I'm dealing with does not look like ["one", "two", "three"]. It's more like:

[{"id":"5","article_name":"New Article 
  Title","article_order":"1","article_author":"Author","article_body":"Start typing your 
  article here!","is_visible":"1","created_date":"2013-10-27 
  05:37:38","edit_date":null,"magazineID":"7"},

 {"id":"13","article_name":"New Article 
 Title","article_order":"2","article_author":"Author","article_body":"Start typing your 
 article here!","is_visible":"1","created_date":"2013-10-27 
  05:45:10","edit_date":null,"magazineID":"7"}]

If you guys look into this data stream..there is one attribute called article_order. This is the attribute (database column) I am trying to modify...

charlietfl · Accepted Answer · 2013-10-28 18:51:27Z

3

Read the jQuery UI Sortable docs. There are lots of events you can bind to and methods for serializing the sorted elements. Within the event callbacks you want to use you can make ajax calls to server with updated data

This angular module is simply a wrapper for jQuery UI Sortable.

Create a demo in jsfiddle or plunker that shows the problems you are having

answered Oct 28, 2013 at 18:51

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

6 Comments

windweller Over a year ago

Thank you for suggesting!!! I have created a plunker file and given out the actual data I'm dealing with.

charlietfl Over a year ago

here's a demo using update event . As for cursor can use css to fix that. plnkr.co/edit/U2OjMbQjA3YzyT7WBEeH?p=preview

windweller Over a year ago

Thank you! Sorry I definitely have overlooked toArray() method description..now I can just pass the array back to server and update the order there!

charlietfl Over a year ago

yup...exactly. Not as bad as you originally thought huh?

windweller Over a year ago

No LOL :) May I ask why use ui.item.parent() to get the $list? What about e, since it seems to be passed in.

|

Sebastien Chartier · Accepted Answer · 2014-05-10 15:30:39Z

2

If you use my new sortable Angular.js directive, you would do it like this:

$scope.items = [{"id":"5","article_name":"New Article 
  Title","article_order":"1","article_author":"Author","article_body":"Start typing
  your article here!","is_visible":"1","created_date":"2013-10-27 
  05:37:38","edit_date":null,"magazineID":"7"},

  {"id":"13","article_name":"New Article 
  Title","article_order":"2","article_author":"Author","article_body":"Start typing
  your article here!","is_visible":"1","created_date":"2013-10-27 
  05:45:10","edit_date":null,"magazineID":"7"}];

$scope.onChange(fromIdx, toIdx) {
   $scope.items[fromIdx].article_order = toIdx;
   $scope.items[toIdx].article_order = fromIdx;

   // OR
   // var temp = $scope.items[fromIdx].article_order;
   // $scope.items[fromIdx].article_order = $scope.items[toIdx].article_order;
   // $scope.items[toIdx].article_order = temp;
}

HTML:

<ul ng-sortable="items"
    ng-sortable-on-change="onChange">
    <li ng-repeat="item in items" class="sortable-element" ng-style="{backgroundColor: item.color}">
        {{item.name}}, {{item.profession}}
    </li>
</ul>

See demo + documentation here:

answered May 10, 2014 at 15:30

Sebastien Chartier

1301 silver badge3 bronze badges

1 Comment

Shashishekhar Hasabnis Over a year ago

@Sebastian Chartier. I tried to use your directive however is it possible to have the fromIdx, toIdx inside onItemsDragend function. if yes then how? Currently what happens is that if i drag an item from 3 to 0. Then the formIdx goes on changing like 3, 2, 1. What if I want it to be just 3.

Dileep · Accepted Answer · 2016-02-15 14:16:11Z

0

I guess I got into an issue similar to you. If we subscribe the update callback we don't get the latest order of items. But using the stop event handler helped me. While using angular ui sortable, we get the model updated with the latest order in the stop event handler. You can post this data to backend or wherever you want to store..Hope this helps...:)

You can refer the jquery ui sortable documentation for stop here http://api.jqueryui.com/sortable/#event-stop

answered Feb 15, 2016 at 14:16

Dileep

11 bronze badge

Collectives™ on Stack Overflow

Angular UI Sortable get index after updated

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related