Sortable Issue

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle'
});

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['schedule-grid'],

  placesSorting: ['order'],
  placesSorted: Ember.computed.sort('places', 'placesSorting'),

  selected: null,

  hours: function() {
    var start = this.get('start').reset('minutes');
    var finish = this.get('finish');

    var current = new Date(start.getTime());
    var hours = [];

    while (current.isBefore(finish)) {
      hours.push(new Date(current.getTime()));
      current.advance('hour');
    }

    return hours;
  }.property('start', 'finish'),

  tracksWidthStyle: function() {
    var width = this.get('hourWidth') * this.get('hours').length;
    return ("width:" + width + 'px').htmlSafe();
  }.property('hours', 'hourWidth'),

  hourWidthStyle: function() {
    var width = this.get('hourWidth');
    return ("width:" + width + "px").htmlSafe();
  }.property('hourWidth'),

  actions: {
    moveReservation: function(reservation, reservable, schedule) {
      this.sendAction('moveReservation', reservation, reservable, schedule);
    },

    addEvent: function(startTime, reservable) {
      this.sendAction('addEvent', startTime, reservable);
    },

    newPlace: function() {
      this.sendAction('newPlace');
    },

    resizeReservation: function(session, hours) {
      this.sendAction('resizeReservation', session, hours);
    },

    select: function(session) {
      if (this.get('selected')) {
        this.set('selected.isSelected', false);
        this.set('selected', null);
      }

      session.set('isSelected', true);
      this.set('selected', session);

      // Have been passing component
      this.sendAction('select', session.get('reservation'));
    },

    editDetails: function() {
      this.sendAction('editDetails');
    },

    reorderPlaces: function(places, draggedPlace) {
      places.forEach((place, index) => {
        place.set('order', index);
        place.save();
      });
    }
  }
});

application.template.hbs

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

schedule-grid.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['schedule-grid'],

  placesSorting: ['order'],
  placesSorted: Ember.computed.sort('places', 'placesSorting'),

  selected: null,

  hours: function() {
    var start = this.get('start').reset('minutes');
    var finish = this.get('finish');

    var current = new Date(start.getTime());
    var hours = [];

    while (current.isBefore(finish)) {
      hours.push(new Date(current.getTime()));
      current.advance('hour');
    }

    return hours;
  }.property('start', 'finish'),

  tracksWidthStyle: function() {
    var width = this.get('hourWidth') * this.get('hours').length;
    return ("width:" + width + 'px').htmlSafe();
  }.property('hours', 'hourWidth'),

  hourWidthStyle: function() {
    var width = this.get('hourWidth');
    return ("width:" + width + "px").htmlSafe();
  }.property('hourWidth'),

  actions: {
    moveReservation: function(reservation, reservable, schedule) {
      this.sendAction('moveReservation', reservation, reservable, schedule);
    },

    addEvent: function(startTime, reservable) {
      this.sendAction('addEvent', startTime, reservable);
    },

    newPlace: function() {
      this.sendAction('newPlace');
    },

    resizeReservation: function(session, hours) {
      this.sendAction('resizeReservation', session, hours);
    },

    select: function(session) {
      if (this.get('selected')) {
        this.set('selected.isSelected', false);
        this.set('selected', null);
      }

      session.set('isSelected', true);
      this.set('selected', session);

      // Have been passing component
      this.sendAction('select', session.get('reservation'));
    },

    editDetails: function() {
      this.sendAction('editDetails');
    },

    reorderPlaces: function(places, draggedPlace) {
      places.forEach((place, index) => {
        place.set('order', index);
        place.save();
      });
    }
  }
});

schedule-grid.template.hbs

<div class="fixed-pane">
  <div class='header'></div>
  {{#sortable-group class='reservables' tagName="ol" onChange="reorderPlaces" as |group|}}
    {{#each placesSorted as |place|}}
      {{#sortable-item tagName="li" model=place group=group class='reservable'}}
        {{place.name}}
      {{/sortable-item}}
    {{/each}}
  {{/sortable-group}}


  <div class='add-reservable'>
    <a href='#' {{action 'newPlace'}}>{{fa-icon "plus"}} New</a>
  </div>
</div>


<div class="track-container">
  <div class="tracks" style={{tracksWidthStyle}}>
    <div class='header'>
      {{#each hours as |hour|}}
        <div class='hour' style={{hourWidthStyle}}>{{structure-hour hour}}</div>
      {{/each}}
    </div>
    {{#each places as |place|}}
      {{schedule-track reservable=place reservations=place.sessions
        hours=hours hourWidth=hourWidth start=start
        moveReservation='moveReservation' addEvent='addEvent'
        resizeReservation='resizeReservation' select='select'
        editDetails='editDetails'}}
    {{/each}}
  </div>
</div>

twiddle.json

{
  "version": "0.5.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.2.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js"
  }
}