items selector does not update properly

[43081j]

ui-sortable watches ui-sortable in scope and, on change, applies each option individually using sortable('option', key, value).

The problem with this is that the default items selector is > *. Due to this bug, when we apply our actual items selector, nothing will change. So theoretically, items does nothing right now, everyone has been selecting > * without realising.

All child elements will remain draggable/sortable.

Of course, to fix this it means jquery-ui team needs to fix their 2 year old bug (which is still broken), which doesn't seem likely.

Maybe we could somehow only call the initial sortable() once we have the config from $scope.ui-sortable?

Original Title: items selector does not function due to jquery-ui bug

[thgreasi]

It looks like that this might be a problem for #248. Unfortunately I never actually created test cases for the items option...

[thgreasi]

Take a look at #225. It seems that calling sortable('refresh') after the items property changes, can be a good workaround for this.

[thgreasi]

The Dev branch of ui-sortable v0.13.x contains a workaround for an other jquery UI bug related to horizontal lists with initially empty content (details). The target milestone for this jquery UI bug is v2.0.0 but since ALL repeaters start empty, it was a valuable workaround to implement.

Do you think that such a workaround (calling sortable('refresh')) should be part of ui-sortable as well? (Since it has a target milestone of v2.0.0 aka don't know when...)

[43081j]

I figured a small workaround for when initialising the sortable at least, so this way the items option does work initially.

Basically, to have an isInitialised variable which we set to true on the first watch callback, at which point we call element.sortable(opts).

var isInitialised = false;
// ...
scope.$watch(attrs.uiSortable, function(newVal) {
    var options = {};
    angular.forEach(newVal, function(value, key) {
        // ...
    });
    if(!isInitialised) {
        element.sortable(angular.extend({}, opts, options));
        isInitialised = true;
    } else {
        element.sortable('option', options);
    }
});

Also made use passing the entire options object rather than iterating through and calling each individually. Reason the initialised one uses angular.extend is to guarantee the default callbacks go in.

Seems to work, can make a PR if you think thats a fair solution?

[thgreasi]

if you check out this example from #225 you can see that the blue item is disabled from the start. There is also a test case for the items property that currently passes. As a result, the problem focuses in the case when: after the initialization of the sortable, the items option changes dynamically. I have been able to create a test case locally to reproduce the problem and I`m try to find a solution.

update: You may want to check this branch for the tests.

[43081j]

Ah you're right, it does work. That's pretty unusual, because in my code I don't change the items afterwards. The only difference is, my data source (the array) changes after the initial sortable is created.

[LeleDev]

+1

[LeleDev]

Any news regarding this issue?

[thgreasi]

There is still no update in the jquery-ui issue and we have not yet introduced any workaround.

[thgreasi]

A late related update... The locked items example in README suggests to use the cancel option if looks good for your use case.