Providing a start function in the sortable options breaks the sorting

[simonedavico]

I ran into this issue while trying to add a class when starting to drag, and removing it on stop. It seems like ui-sortable-placeholder objects are not properly deleted, and sometimes empty elements are added to the sortable, as if in the underlying model an empty object was added to the array.

You can verify it by taking the basic example in the docs and adding the code below to sortableOptions:

start: function(e, ui) {
    ui.item.addClass('foobar');
} 

[thgreasi]

This line might be the source of your problem. Did you try restoring the classes on update/stop ?

[thgreasi]

You can also try using the helper option, so that you do not mess with the DOM elements that the directive manipulates.
hint: clone the original element, apply the extra classes and return it from the helper method you created.

[simonedavico]

@thgreasi What do you mean by "restoring the classes"? I simply call ui.item.toggleClass('.dragging') on both start and stop, I opened an issue after seeing the strange behaviour.

How can I use the helper? The directive does not expose an API to retrieve it after setting it to "clone" in order to toggle a class like I want to do, right?

Thank you for your help anyway :)

[thgreasi]

What do you mean by "restoring the classes" ... toggleClass ...

Yes, that's what I was meaning, but as it looks now... it doesn't work as I expected.
Actually we should not manipulate dom elements that are managed by the directive.

• Manipulating inner elements of the dragged list items should be OK though (possible to add classes there).
• On the other hand, creating a directive for the list items, should be the angular way.

How can I use the helper?

Read the jquery-ui-sortable API or search it.

The directive does not expose an API ...

The directive exposed ALL the callbacks and options that are provided by jquery-ui-sortable. Use the e and ui of the start/update/stop/etc callbacks and you should be able to access anything. For example, within the update callback you can access the sortable element (and as a result anything that jquery-ui-sortable exposes.

...
update: function (e, ui) {
  // this is just for demonstration.
  // Don't do this in actual use cases,
  // use the options object you created
  ui.item.parent().sortable('option', 'helper');
},
...

Here is a working example of the solution I suggested using the helper option. If your items are too complex you should probably follow the solution of the directive.
Thanks for reporting, hope I helped.
Feel free to re-open (or open a new issue) in any case.

[simonedavico]

Thank you for your help, I actually found the solution yesterday but forgot to update my post here. The helper workaround will do :)

I'm not very familiar with the issues system, so maybe it's a stupid question, but why did you close the issue? The workaround is ok for me, but the strange behaviour when a start function is passed as an option is still there. Shouldn't it be marked as a bug?

[thgreasi]

I thought that the issue occurred because of toggling the item class. Does it happen, even when the provided start method doesn't manipulate the DOM? If so, please provide an example pen.

Otherwise, it's somewhat expectable that things might get wrong when you manipulate the same elements that the directive uses for its own purpose.

[simonedavico]

You are right, the bug occurs only when the DOM element is manipulated. It's still strange, because I can't see the impact of adding a class, but it's definitely there. Maybe then to avoid issues like this one it would be better to add a note to the documentation to avoid manipulating the DOM in the startfunction. A user might try to do that, since this behaviour doesn't occur when using the sortable plugin without the directive.

[thgreasi]

How a notice like:

Directives should be the only way to manipulate the DOM. All the callbacks (start/update/stop) are provided only for emmiting events and altering the scope.

?

[simonedavico]

Yes, stating also explicitly that

manipulating the DOM in the callback functions will cause uncorrect behaviour.