Skip to content
This repository was archived by the owner on Sep 8, 2020. It is now read-only.

Commit 57c5021

Browse files
thgreasithgreasi
authored
Merge pull request #493 from thgreasi/helperCancelX3
fix(sortable): properly restore DOM after cancel()
2 parents da521c0 + 53a31b3 commit 57c5021

File tree

4 files changed

+101
-17
lines changed

4 files changed

+101
-17
lines changed

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-ui-sortable",
3-
"version": "0.15.0",
3+
"version": "0.15.1",
44
"description": "This directive allows you to jQueryUI Sortable.",
55
"author": "https://github.com/angular-ui/ui-sortable/graphs/contributors",
66
"license": "MIT",

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-ui-sortable",
3-
"version": "0.15.0",
3+
"version": "0.15.1",
44
"description": "This directive allows you to jQueryUI Sortable.",
55
"author": "https://github.com/angular-ui/ui-sortable/graphs/contributors",
66
"license": "MIT",

‎src/sortable.js‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -369,29 +369,30 @@ angular.module('ui.sortable', [])
369369
// If the received flag hasn't be set on the item, this is a
370370
// normal sort, if dropindex is set, the item was moved, so move
371371
// the items in the list.
372-
if(!ui.item.sortable.received &&
373-
('dropindex' in ui.item.sortable) &&
374-
!ui.item.sortable.isCanceled()) {
372+
var wasMoved = ('dropindex' in ui.item.sortable) &&
373+
!ui.item.sortable.isCanceled();
374+
375+
if (wasMoved && !ui.item.sortable.received) {
375376

376377
scope.$apply(function () {
377378
ngModel.$modelValue.splice(
378379
ui.item.sortable.dropindex, 0,
379380
ngModel.$modelValue.splice(ui.item.sortable.index, 1)[0]);
380381
});
381-
} else {
382-
// if the item was not moved, then restore the elements
382+
} else if (!wasMoved &&
383+
!angular.equals(element.contents().toArray(), savedNodes.toArray())) {
384+
// if the item was not moved
385+
// and the DOM element order has changed,
386+
// then restore the elements
383387
// so that the ngRepeat's comment are correct.
384-
if ((!('dropindex' in ui.item.sortable) || ui.item.sortable.isCanceled()) &&
385-
!angular.equals(element.contents(), savedNodes)) {
386-
387-
var sortingHelper = getSortingHelper(element, ui, savedNodes);
388-
if (sortingHelper && sortingHelper.length) {
389-
// Restore all the savedNodes except from the sorting helper element.
390-
// That way it will be garbage collected.
391-
savedNodes = savedNodes.not(sortingHelper);
392-
}
393-
savedNodes.appendTo(element);
388+
389+
var sortingHelper = getSortingHelper(element, ui, savedNodes);
390+
if (sortingHelper && sortingHelper.length) {
391+
// Restore all the savedNodes except from the sorting helper element.
392+
// That way it will be garbage collected.
393+
savedNodes = savedNodes.not(sortingHelper);
394394
}
395+
savedNodes.appendTo(element);
395396
}
396397

397398
// It's now safe to clear the savedNodes

‎test/sortable.e2e.callbacks.spec.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,77 @@ describe('uiSortable', function() {
6868
li.simulate('drag', { dy: dy });
6969
expect($rootScope.items).toEqual(['One', 'Two', 'Three']);
7070
expect($rootScope.items).toEqual(listContent(element));
71+
// try again
72+
li = element.find('[ng-repeat]:eq(1)');
73+
dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
74+
li.simulate('drag', { dy: dy });
75+
expect($rootScope.items).toEqual(['One', 'Two', 'Three']);
76+
expect($rootScope.items).toEqual(listContent(element));
77+
// try again
78+
li = element.find('[ng-repeat]:eq(1)');
79+
dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
80+
li.simulate('drag', { dy: dy });
81+
expect($rootScope.items).toEqual(['One', 'Two', 'Three']);
82+
expect($rootScope.items).toEqual(listContent(element));
83+
84+
li = element.find('[ng-repeat]:eq(0)');
85+
dy = (2 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
86+
li.simulate('drag', { dy: dy });
87+
expect($rootScope.items).toEqual(['Two', 'Three', 'One']);
88+
expect($rootScope.items).toEqual(listContent(element));
89+
90+
li = element.find('[ng-repeat]:eq(2)');
91+
dy = -(2 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
92+
li.simulate('drag', { dy: dy });
93+
expect($rootScope.items).toEqual(['One', 'Two', 'Three']);
94+
expect($rootScope.items).toEqual(listContent(element));
95+
96+
$(element).remove();
97+
});
98+
});
99+
100+
it('should cancel sorting of node "Two" and "helper: function" that returns an element is used', function() {
101+
inject(function($compile, $rootScope) {
102+
var element;
103+
element = $compile(''.concat(
104+
'<ul ui-sortable="opts" ng-model="items">',
105+
beforeLiElement,
106+
'<li ng-repeat="item in items" id="s-{{$index}}">{{ item }}</li>',
107+
afterLiElement +
108+
'</ul>'))($rootScope);
109+
$rootScope.$apply(function() {
110+
$rootScope.opts = {
111+
helper: function (e, item) {
112+
return item.clone();
113+
},
114+
update: function(e, ui) {
115+
if (ui.item.sortable.model === 'Two') {
116+
ui.item.sortable.cancel();
117+
}
118+
}
119+
};
120+
$rootScope.items = ['One', 'Two', 'Three'];
121+
});
122+
123+
host.append(element);
124+
125+
var li = element.find('[ng-repeat]:eq(1)');
126+
var dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
127+
li.simulate('drag', { dy: dy });
128+
expect($rootScope.items).toEqual(['One', 'Two', 'Three']);
129+
expect($rootScope.items).toEqual(listContent(element));
130+
// try again
131+
li = element.find('[ng-repeat]:eq(1)');
132+
dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
133+
li.simulate('drag', { dy: dy });
134+
expect($rootScope.items).toEqual(['One', 'Two', 'Three']);
135+
expect($rootScope.items).toEqual(listContent(element));
136+
// try again
137+
li = element.find('[ng-repeat]:eq(1)');
138+
dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
139+
li.simulate('drag', { dy: dy });
140+
expect($rootScope.items).toEqual(['One', 'Two', 'Three']);
141+
expect($rootScope.items).toEqual(listContent(element));
71142

72143
li = element.find('[ng-repeat]:eq(0)');
73144
dy = (2 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
@@ -115,6 +186,18 @@ describe('uiSortable', function() {
115186
li.simulate('drag', { dy: dy });
116187
expect($rootScope.items).toEqual(['One', 'Two', 'Three']);
117188
expect($rootScope.items).toEqual(listContent(element));
189+
// try again
190+
li = element.find('[ng-repeat]:eq(1)');
191+
dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
192+
li.simulate('drag', { dy: dy });
193+
expect($rootScope.items).toEqual(['One', 'Two', 'Three']);
194+
expect($rootScope.items).toEqual(listContent(element));
195+
// try again
196+
li = element.find('[ng-repeat]:eq(1)');
197+
dy = (1 + EXTRA_DY_PERCENTAGE) * li.outerHeight();
198+
li.simulate('drag', { dy: dy });
199+
expect($rootScope.items).toEqual(['One', 'Two', 'Three']);
200+
expect($rootScope.items).toEqual(listContent(element));
118201

119202
li = element.find('[ng-repeat]:eq(0)');
120203
dy = (2 + EXTRA_DY_PERCENTAGE) * li.outerHeight();

0 commit comments

Comments
 (0)