http://stackoverflow.com/questions/39663630/delete-item-after-sorting-jquery-ui-with-ember?noredirect=1#comment66630393_39663630

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
    list: Ember.ArrayProxy.create({content: Ember.A()}),
    init: function () {
        this._super();
        this.get('list').pushObject({
            id: 1,
            index: 1,
            name: 'name1'
        });
        this.get('list').pushObject({
            id: 2,
            index: 2,
            name: 'name2'
        });
        this.get('list').pushObject({
            id: 3,
            index: 3,
            name: 'name3'
        });
        this.get('list').pushObject({
            id: 4,
            index: 4,
            name: 'name4'
        });
        this.get('list').pushObject({
            id: 5,
            index: 6,
            name: 'name5'
        });
    },
    sortProps: ['index:asc'],
    sortedList: Ember.computed.sort('list', 'sortProps'),
    updateSortedOrder(indices) {
        this.beginPropertyChanges();
        let tracks = this.get('list').forEach((item) => {
            var index = indices[Ember.get(item, 'id')];
            if (Ember.get(item, 'index') !== index) {
                Ember.set(item, 'index', index);
            }
        });
        this.endPropertyChanges();
    },
    didRender: function () {
        this._super();
        var self = this;

        Ember.$("#department_roles").sortable({
            update: function () {
                var indices = {};
                Ember.$(this).children().each((index, item) => {
                    indices[Ember.$(item).data('id')] = index + 1;
                });

                self.updateSortedOrder(indices);
            },
        });

        Ember.$('#department_roles').disableSelection();
    },
    actions: {
        removeItem: function (itemId) {

            var self = this,
                deleteItem,
                list = this.get('list');

            this.$("#department_roles").sortable("destroy");

            list.arrayContentWillChange();

            list.forEach(function (item) {

                if (item.id === itemId) {
                    deleteItem = item;
                }
            });

            list.removeObject(deleteItem);

            list.arrayContentDidChange();

            Ember.$("#department_roles").sortable({
                update: function () {
                    var indices2 = {};
                    Ember.$(this).children().each((index, item) => {
                        indices2[Ember.$(item).data('id')] = index + 1;
                    });
                    self.updateSortedOrder(indices2);

                },
            });

            console.log('sortedList in removeItem', self.get('sortedList'));
        }
    }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
{{my-component }}
<br>
{{outlet}}
<br>
<br>

templates.components.my-component.hbs

<ui id="department_roles">
{{log sortedList }}
    {{#each sortedList as |item|}}
              <li data-id="{{item.id}}"  role_id="{{item.id}}" class="ui-state-default role_droppable">
                <span>
                    {{item.name}}
                </span>
                <button {{action "removeItem" item.id}}>Remove</button>
            </li>
    {{/each}}
</ui>
{{yield}}

twiddle.json

{
  "version": "0.10.5",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.8.0",
    "ember-data": "2.8.0",
    "ember-template-compiler": "2.8.0",
    "ember-testing": "2.8.0",
    "jquery-ui": "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js",
    "jquer-ui-css" :"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"
  },
  "addons": {}
}