Swap nodes

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  filter: 'all',
  
  _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: {
    swapPlaces() {
      let [greenPart, bluePart, archived] = document.querySelectorAll('.part');
      
      archived.parentNode.insertBefore(archived, bluePart);
    }
  }
});

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>

<ul>
  {{#each parts as |part|}}
    <li class="part">
      {{ part.name }} 
      {{#if part.isArchived}}
        <strong>ARCHIVED</strong>
      {{/if}}
    </li>
  {{/each}}
</ul>
<br><br>
<button type="button" onclick={{ action "swapPlaces" }}>Swap places</button>

<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"
  }
}