sortableeee

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  items: ['one', 'two', 'three', 'four'],
  
  reorderItems(newOrder) {
    this.set('items', newOrder);
  },
  
  up(item) {
    this.move(item, -1);
  },
  
  down(item) {
    this.move(item, 1);
  },
  
  move(item, delta) {
    let items = [...this.get('items')];
    let index = items.indexOf(item);
    
    items.splice(index, 1);
    items.splice(index + delta, 0, item);
    
    console.log(items);
    
    this.set('items', items);

  }
});

templates.application.hbs

{{#sortable-group tagName="ul" onChange=(action reorderItems) as |group|}}
  {{#each items key="@index" as |item|}}
    {{#sortable-item tagName="li" model=item group=group}}
      {{item}}
      <button onclick={{action up item}}>👆</button>
      <button onclick={{action down item}}>👇</button>
    {{/sortable-item}}
  {{/each}}
{{/sortable-group}}

twiddle.json

{
  "version": "0.12.1",
  "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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-sortable": "1.10.0"
  }
}