New Twiddle

application.controller.js

import Ember from 'ember';

const { set, computed: { sort } } = Ember;

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  
	sorting: ['position:asc'],
  sortedItems: sort('model', 'sorting'),
  
  actions: {
    sorted(oldIndex, newIndex) {
      let items = this.get('model');
      
      let oldItem = items.findBy('position', oldIndex);
      let newItem = items.findBy('position', newIndex);

      set(oldItem, 'position', newIndex);
      set(newItem, 'position', oldIndex);
    }
  }
});

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return [
      { position: 0, label: 'One' },
      { position: 4, label: 'Five' },
      { position: 1, label: 'Two' },
      { position: 3, label: 'Four' },
      { position: 2, label: 'Three' }
    ];
  }
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>

<br>

<h2>sortable-list</h2>
{{#sortable-list items=sortedItems update=(action 'sorted') as |item|}}
	{{item.label}}: {{item.position}}
{{/sortable-list}}

<br>

<h2>each</h2>
<ul>
	{{#each sortedItems as |item|}}
		<li>{{item.label}}: {{item.position}}</li>
	{{/each}}
</ul>

sortable-list.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'ul',
  
  didInsertElement() {
    this.$().sortable({
      start: (event, ui) => {
        ui.item.oldIndex = ui.item.index();
      },
    	update: (event, ui) => {
        let oldIndex = ui.item.oldIndex;
        let newIndex = ui.item.index();

        this.$().sortable('cancel');
        
        this.attrs['update'](oldIndex, newIndex);
      }
    });
  }
});

sortable-list.template.hbs

{{#each items as |item|}}
	<li>{{yield item}}</li>
{{/each}}

twiddle.json

{
  "version": "0.4.16",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "jquery-ui": "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js",
    "ember": "1.13.10",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "1.13.10"
  }
}