Could we perhaps have some better doc's?

I'd be more than willing to write some up and help out but do we have any preferences in how/where they should be written? Perhaps a github page

I'm trying to use ng-sortable inside a directive that is using ng-sortable like:

directive1:

ng-sortable 
    ng-repeat(list1)
      directive2

directive2

   ng-sortable
      ng-repeat(list2)

directive1 is working fine, the list is ordered as expected, but on directive2 when trying to order (dragging/dropping) its changing the order going back to the original position. If I remove the ng-sortable config on directive1 the directive2 start working.

Any idea?

When moving from one nested listing to another, the element move but creates a clone on the older list.

I've made this plunker to recreate the problem.

If you move, for example, one "Shirt" from the "Shirt list" into a "Shoes list", the shirt will move, but the same shirt will be recreated on the "Shirt list" again, cloning the element.

ng-repeat isn't actualized after using ng-sortable,

For exemple:

 <tbody ng-sortable="vm.sortableConfig" ng-repeat="(key, value) in array">
    <tr>{{key}}</tr>
</tbody>

The result before using sortable:
1
2
3

The result for exemple after using sortable:
2
1
3

The result wanted after using sortable:
1
2
3

Apparently, ng-repeat isn't informed from ng-sortable. The key from ng-repeat isn't updated.
Have you a solution for this problem ? Thank you in advance.

I installed this package with npm. npm install -S angular-legacy-sortablejs.
but it occurs error below.

Module not found: Error: Cannot resolve module 'angular-legacy-sortablejs' in /home/myproject/src/

May be because of require('./Sortablejs')

I think that published package to npm is older than github#master.
Please republish.

thanks.

Error fires on drag event if one of these functions: onStart(), onEnd(), onDrag()... etc. was declared in ng-sortable configs.

This error is triggered because variable: var source = getSource(); got undefined in function: _emitEvent(evt) file ng-sortable.js at line 79.

My solution was: ng-sortable.js file, change function _emitEvent()
delete lines 84 and 85 so function now looks like:
function _emitEvent(/**Event*/evt, /*Mixed*/item) { var name = 'on' + evt.type.charAt(0).toUpperCase() + evt.type.substr(1); var source = getSource(); /* jshint expr:true */ options[name] && options[name]({ oldIndex: evt.oldIndex, newIndex: evt.newIndex }); }

Should this branch be deprecated in favour of any of the available forks?

I don't know who's keeping this branch up to date.

Consider the following case:

• item 1
  • subitem 1
• item 2
• item 3
  • subitem 2

If both the main list and sublists are connected then root items can be normally sorted each other and item 2 can be dragged to subitem of item 1 or item 3.

However, if you drag item 3 as subitem of item 1, i.e. aiming to get the following:

• item 1
  • subitem 1
  • item 3
    • subitem 2
• item 2

then there will be the following error (and the subitem 2 will not be shown):

Sortable.js:1823 Uncaught TypeError: Cannot read property 'Sortable1551478014931' of null
    at _dispatchEvent (VM1983 Sortable.js:1823)
    at Sortable._onDrop (VM1983 Sortable.js:1446)
    at Sortable.handleEvent (VM1983 Sortable.js:1527)

A bit of debugging showed that ng-sortable triggers destroy which deletes, I believe, the sortable of the dragging item i.e. item 3.

Here is a minimal codepen demo.

This might be related to #43

Hello,

Thanks for nice work.

I have an issue.
After dragend (onSort), the numbers of items are increasing.
I also tried dev, still no luck.
Any help will be appreciated!

Thank you,

Mudin

I've discovered another bug with the case of nested list.

If we consider the list like this

• item 1
  • subitem 1
• item 2
• item 3

As long as you move items in the main list all will be fine. However, once you move item (e.g. item 2) to nested list all following moves will have event.model set to item 2. In other words, if you then try to move item 3 above item 1 the move will succeed, however in callbacks (e.g. onEnd) the event.model will be wrong.

The same is true if the first action is moving an item from from the nested list (e.g. subitem 1). All following moves will have subitem 1 set as the model.

Here's minimal codepen showing the problem.

I don't think these options are doing anything.

angular-legacy-sortable imports sortablejs incorrectly after versions 1.10.0 of sortablejs, which leads to it not finding Sortablejs.create.

More info in this issue:
SortableJS/Sortable#1728

It would be great if we can add using bower!

When do you plan to realize the possibility of a "store"?

I tried to use "store", but it does not work. I also did not find the use of this option in angular-legacy-sortable.js.

In this sample : http://plnkr.co/edit/z8aj7ALiyDVXE6WabObB?p=preview
If you drag the Bloc in index 0 then you drag a product line in the bloc.
The bloc is deleted

I don't succes to see where the bug appear

Beware when using event.model if you have filters on your ng-repeat directive. SortableJS will report the wrong item in event.model. You will need to find the correct item manually using the event.oldIndex and/or the event.newIndex properties.

Also beware that when using filters, the event.models array comes in the old sort order, not the new one. Without using filters, the new sort order array is passed properly.

Hi

Sortablejs released version 1.6.0 which fixes a memory leak, however, the angularjs version requires v1.5.x

When are you planning on releasing a version that works with 1.6.0 ?

Thanks

To fix add :
node.getAttribute('ng-repeat-start') || node.getAttribute('ng-repeat-end') in line 41

The move away from env.clone on this line:https://github.com/SortableJS/angular-legacy-sortablejs/compare/8e2f1c97897da91ab373537b47551cabfab2e078..master#diff-fd07c4295c44d1bcf1aaf3d5862c0afbL115 caused an issue dragging and dropping between multiple sortable lists. The source list's order gets shuffled around (see attached video).

_emitEvent has an inner function getSource() that return null because ng-repeat regex doesn't match any childNodes on angular debug comments. So any event (onStart, onSort, etc...) doesn't work.

html

<ul class="news-tag-list" ng-sortable="vm.customSortableConf">
                <li id="{{item.label}}" ng-repeat="item in vm.customSortableList" ng-click="vm.customItemClick(item)" ng-class="{'fixed':item.fixed&&vm.showEditButton}">
                    <div>{{item.label}}</div>
                </li>                
</ul>

controller.js

var vm={};
vm.customSortableConf={
                group:{
                    name:"custom",
                    put:"allCategory"
                },
                filter: ".fixed",
                disabled:true,
                sort: true,
                onMove:function(evt){
                    console.log(evt);
                    return evt.related.className.indexOf('fixed') === -1;
                }
            };

When I move the item, the onMove function is not called.Why?

I don't want multi effect in ng-repeat,how can I prevent that?

I'm learning webpack, so hopefully I'm not doing something stupid --

Shouldn't this project require Sortable as sortablejs instead of ./Sortable, since it's no longer in the main Sortable repository?

If so, I can make a PR. :)

Thanks for the hard work.

Your examples show moving between pre-existing DOM elements in multiple lists, but in Angular all DOM elements are generated via the data model.

When moving from one list to another, it succeeds moving the DOM item and the data item, BUT it does not remove it from the previous data list. The previous list reappears as if cloned. It doesn't appear to know to remove from the data model which would certainly be an Angular specific thing.

I had to plug into onRemove: and do a dirty check of the removed evt.model attribute (ie: id) from the actual scope variable.

$scope.manyLists = [[{id:1}],[{id:2}],[{id:3}]];

<my-dir items="manyLists[0]"></my-div>
<my-dir items="manyLists[1]"></my-div>
<my-dir items="manyLists[2]"></my-div>

Will this be solved by #36?

At first I tought my error was similar to #23 but it's a bit different.

Basically, this happens when I try to use the put/pull method defined within the group params when working with nested sorting so I can move from one nested sorting list to another nested sorting list.

This is the error:

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at _sync (angular-legacy-sortable.js:118:46)
at a.onAdd (angular-legacy-sortable.js:172:33)

This is what my config looks like:

vm.list = [
    {id: 1, name: 'Name of item 1',
        gallery: [
            {id: 1, name: 'Name of image 1'},
            {id: 2, name: 'Name of image 2'},
            {id: 3, name: 'Name of image 3'}
        ]
    },
    {id: 2, name: 'Name of item 2', 
        gallery: [
            {id: 1, name: 'Name of image 1'},
            {id: 2, name: 'Name of image 2'},
        ]
    },
    {id: 3, name: 'Name of item 3', gallery: []}
];

And use it like this:

<ul ng-sortable>
    <li ng-repeat="item in vm.list track by item.id">
        <p>{{item.name}}</p>
        <ul ng-sortable="{group: {name:'child', put: true, pull:true} }">
            <li ng-repeat="gallery in item.gallery track by gallery.id">
                <p>{{gallery.nome}}</p>
            </li>
        </ul> 
    </li>
</ul>

I also tried to define the nested sortable item as follow:

<ul ng-sortable="{group: {name:'child{{item.id}}', put: true, pull:true} }">

//or
<ul ng-sortable="{group: {name:'child{{item.id}}', put: 'child{{item.id}}', pull:true} }">

Both give me the same end result, wich is the error and then stop working 100%.

After drag & drop elements, if I add dynamically element in my array. these elements are not rendered in same order.

Problem 5 of this plunker :
http://plnkr.co/edit/Ot5rWTCqRQYnEyly1nvM?p=preview

You can see the problem on the demo page: http://rubaxa.github.io/Sortable/

Go the the 2 lists for the Angular demo.

1. Drag 1st element from left to right, see item still appears on left side
2. Drag 2nd element from left to right, see error on console: "Cannot read property 'split' of undefined"

When the delay configuration is set to a value greater than zero, the _disableDelayedDrag function is called almost instantly after _prepareDragStart by a mousemove event. This causes the drag and drop to be not useable.

This problem occurs in chrome on android.
Chrome version: 63.0.3239.11
Android version 8.0.0

Latest chrome update breaks sortable 1.6.0 so we need to update to 1.7.0 to use it again.

Ref: SortableJS/Sortable#1213

In firefox the old version works as expected.

To get an instance after you have already created the sortable. something like, var sortableInstance = $("#mysortable").sortable("widget")

the following error message appears in the console :

Error in event handler for runtime.onMessage: TypeError: Cannot read property 'val' of undefined
at Object.cipEvents.triggerActivatedTab (chrome-extension://oakpnnaknlicjghpchokjoelhfjnmhcd/rdmchrome.js:2313:14)
at chrome-extension://oakpnnaknlicjghpchokjoelhfjnmhcd/rdmchrome.js:61:14

this error appear when I change of browser tab and only happens in Chrome browser.

I am using sortable with angular

"angular": "1.6.4",
"sortablejs": "^1.5.1"
"angular-legacy-sortablejs-maintained": "^0.5.2"

If applying ng-sortable on an element which also has ng-if, the plugin causes an error:

Cannot create property 'stack' on string 'Sortable: `el` must be HTMLElement, and not [object Comment]'

I presume because it's getting the comment node that Angular inserts for the ng-if handling.

Update npm, please.
You have require('./Sortable') instead require('sortablejs') there

I was able to get items to move between lists without a problem with the original Sortable library, but I cannot get it work with Angular. I have a plunk here, could someone take a look and tell me what I am missing?

When there're two elements,then after three times of exchanging, there will be a bug:

angular.min.js:103 Error: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.
    at Comment.<anonymous> (jquery-1.8.2.min.js:2)
    at init.domManip (jquery-1.8.2.min.js:2)
    at init.after (jquery-1.8.2.min.js:2)
    at Object.enter (angular.min.js:176)
    at Object.move (angular.min.js:176)
    at angular.min.js:235
    at Object.fn (angular.min.js:122)
    at l.$digest (angular.min.js:123)
    at l.$apply (angular.min.js:126)
    at Sortable.onEnd (ng-sortable.js:141)

and in the first of exchanging, the callback parameter evt return the wrong order in evt.models.

I have a list of editable inputs that is sortable using ng-sortable. For example,

<div ng-sortable>
    <div ng-repeat = question in question_list>
        <input type="text" ng-model = "question">
    </div>
</div>

When someone change the text in the input, the list of inputs is no longer sortable by dragging. I have the same problem if the input is a button as well. If someone clicks on the button, the list of buttons is also no longer sortable by dragging.

What do you think is the problem?

view code is like this

<div ng-sortable="sortable">
  <div ng-repeat="app in apps track by app.id">
    <md-list-item ng-click="showSettingDialog(app)" class="list-item">
      <img ng-src="{{'images/social/plugin-icon-'+app.type+'.png'}}" class="list-img"/>
      <p style="margin-left: 12px;">{{ app.typeName }}</p>
      <span ng-click="del(app, $event)" class="list-item-del" style="cursor: pointer;display: none;margin-top: 10px;">
        <i class="material-icons">delete</i>
      </span>
    </md-list-item>
  </div>
</div>

but when drag item of list, the whole page is show on the page, how this happen ?