Swap nodes

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  filter: 'all',

  init: function () {
    this._super();
    Ember.run.schedule("afterRender",this,function() {
      this.updateSortable();
    })
  },

  updateSortable: function(){
    let $el = $(".ui-sortable");
    let updateParts = (evt) => {
      this.send("updateParts", evt)
    };
    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();

        updateParts({ startIndex, endIndex });
        $el.sortable('cancel');
        // the above doesn't undo mutation correctly
        itemEl.parentNode.insertBefore(itemEl, nextSibling);
      }
    });
  },

  _parts: [
    { name: "Green", isArchived: false },
    { name: "Blue", isArchived: false },
    { name: "Yellow", isArchived: true }
  ],

  parts: Ember.computed('_parts.@each.isArchived', 'filter', function () {
    if (this.get('filter') === 'all') {
      return this.get('_parts');
    } else {
      return this.get('_parts').filter((part) => !part.isArchived);
    }
  }),

  actions: {
    updateParts: function(evt) {
      let { startIndex, endIndex } = evt;
      let parts = this.get('parts');
      let part = parts[startIndex];
      parts.removeAt(startIndex);
      parts.insertAt(endIndex, part);
    }
  }
});

templates.application.hbs

<p> Here what you need to do:</p>
<ol>
  <li>Drag the archived part</li>
  <li>Click "Active" button</li>
  <li>Click "All" button</li>
 </ol>
<br><br>

{{#ui-sortable content=parts axis="y" class="my-sort" as |part|}}
  <li>
  	{{ part.name }}
    {{#if part.isArchived}}
    	<strong>ARCHIVED</strong>
    {{/if}}
  </li>
{{/ui-sortable}}

<br><br>
<button type="button" onclick={{ action (mut filter) 'all' }}>All</button>
<button type="button" onclick={{ action (mut filter) 'active' }}>Active</button>

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-ui-sortable": "0.3.3"
  }
}