New Twiddle

components.my-sortable-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'li',
  classNames: 'ui-state-default'
});

components.my-sortable.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'ul',
  classNames: 'ui-sortable',
  didInsertElement() {
    let $el = this.$();
    let updateAction = this.update;
    let startIndex;
    let nextSibling;
    $el.sortable({
      start(evt, ui) {
        startIndex = ui.item.index();
        // on start a placeholder is inserted after
        // stash our original nextSibling
        // since cancel doesn't undo correctly
        nextSibling = ui.placeholder[0].nextSibling;
      },
      update(evt, ui) {
        let item = ui.item;
        let itemEl = item[0];
        let endIndex = item.index();
        updateAction({ startIndex, endIndex });
        $el.sortable('cancel');
        // the above doesn't undo mutation correctly
        itemEl.parentNode.insertBefore(itemEl, nextSibling); 
      }
    });
    $el.disableSelection();
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  fruits: ['apple', 'banana', 'orange', 'pear'],
  actions: {
    updateFruits(evt) {
      let { startIndex, endIndex } = evt;
      let fruit = this.fruits[startIndex]; 
      this.fruits.removeAt(startIndex);
      console.log('removeAt', startIndex, this.fruits);
      this.fruits.insertAt(endIndex, fruit);
      console.log('insertAt', endIndex, fruit);
    }
  }
});

styles.app.css

body {
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
	font-size: 62.5%;
}
.ui-sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
.ui-sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
.ui-sortable li span { position: absolute; margin-left: -1.3em; }

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
{{#my-sortable update=(action "updateFruits")}}
	{{#each fruits as |fruit index|}}
		{{#my-sortable-item}}
    	{{fruit}} ({{index}})
    {{/my-sortable-item}}
	{{/each}}
{{/my-sortable}}

templates.components.my-sortable-item.hbs

<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
{{yield}}

twiddle.json

{
  "version": "0.8.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "jqueryui.js": "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js",
    "jqueryui.css": "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css",
    "ember": "2.5.1",
    "ember-data": "2.5.2",
    "ember-template-compiler": "2.5.1"
  }
}