Ember jquery ui sortable remove item not in sync

1

component:

export default Ember.Component.extend({

_refreshSortable() {
    this.$().sortable('destroy');
    this.renderSortable();

},
fakeDataChanged: Ember.observer('fakeData.[]', function() {
    Ember.run.scheduleOnce('afterRender', this, this._refreshSortable);

}),

fakeData: [
    Ember.Object.create({id: 1, name: 'test'}),
    Ember.Object.create({id: 2, name: 'test1'}),
    Ember.Object.create({id: 3, name: 'test2'}),
    Ember.Object.create({id: 4, name: 'test3'}),
],

actions: {
    removeItem(item) {
        this.get('fakeData').removeObject(item);

    }

},
renderSortable() {
        this.$().sortable({
            opacity : 0.6,
            axis : 'y'

           });

           this.$().sortable().disableSelection();

   },

   _renderSortable: Ember.on('didInsertElement', function() {

       this.renderSortable();

   }),



});

template:

{{#sortable-ui as |sortable|}}

{{#each sortable.fakeData as |item|}}

    <li>{{item.name}}<button {{action "removeItem" item target=sortable}}>x</button></li>

{{/each}}

{{/sortable-ui}}

If you try and remove an item AFTER a sort is perform, it will either lock up the ability to remove, or remove items which it’s not supposed to.

This is simplified code in order to describe the root problem.

2

Have you tried using an existing ember sorting add on? Using jquery plugins that mess with your Dom is expected to lead to stuff not working

3

do you recommend using the html5 drag and drop api that ember supports? I need to support at least IE10, this is mainly the reason I have always used jQuery UI for complete browser support. I don’t have much experience with D&D api.

4

I’ve got an add-on at GitHub - 12StarsMedia/ember-ui-sortable: jQuery UI Sortable component for EmberJS 1.13+, which used jQuery UI Sortable. You could try it out or another option on http://emberobserver.com.

5

Hi Todd,

the addon you mention doesn’t work either for me unfortunately.

when I remove an item from the sortable after performing a sort, the item will somehow lose its current state in the sortable dom and will have the same symptoms as per above.

if you can show an example of it working in this scenario (have a simple delete ability on the sortable item), I will use it. I have already tried modifying your addon extensively with no avail.

this is weird because I have used jQuery UI sortable in the past with Ember without a problem.