sortable-list component example

index.hbs

{{#each fruits}}
{{this}}
{{/each}}

{{draggable-list values=fruits}}

index.js

var IndexRoute = Ember.Route.extend({
  model: function() {
    var model = {
      fruits: ['apple','pear','banana','kiwi']
    };
    setTimeout(function () {
      model.fruits.pushObject('orange');
      model.fruits.removeObject('pear');
    }, 2000);
    return model;
  }
});

export default IndexRoute;

sortable-list.js

function applySortable(el, target, method) {
  if (el) {
    el.sortable().bind('sortupdate', function(e, ui) {
      Ember.run(target, method, ui.item.text(), ui.item.index());
    });
  }
}

function destroySortable(el) {
  if (el) {
    el.sortable('destroy');
  }
}

var DraggableListComponent = Ember.Component.extend({
  values: null,

  tagName: 'ul',

  render: function (buffer) {
    var values = this.get('values');
    if (values) {
      values.forEach(function (value) {
        buffer.push('<li>'+value+'</li>');
      });
    }
  },

  didInsertElement: function () {
    applySortable(this.$(), this, 'itemDragged');
  },

  willDestroyElement: function () {
    destroySortable(this.$());
  },

  itemDragged: function (value, index) {
    var values = this.get('values');
    this.updateDisabled = true;
    values.removeObject(value);
    values.insertAt(index, value);
    this.updateDisabled = false;
  },

  valuesWillChange: function () {
    var values = this.get('values');
    if (values) {
      values.removeArrayObserver(this);
    }
  }.observesBefore('values'),

  valuesDidChange: function () {
    var values = this.get('values');
    if (values) {
      values.addArrayObserver(this);
    }
  }.observes('values').on('init'),

  arrayWillChange: function (values, start, removeCount, addCount) {
    if (this.updateDisabled) return;
    var ul = this.$();
    if (ul) {
      ul.sortable('destroy');
      ul.find('li').slice(start, start+removeCount).remove();
    }
  }.on('values'),

  arrayDidChange: function (values, start, removeCount, addCount) {
    if (this.updateDisabled) return;
    var ul = this.$();
    if (ul) {
      values.slice(start, start+addCount).forEach(function (value) {
        $('<li></li>').text(value).appendTo(ul);
      });
      applySortable(ul, this, 'itemDragged');
    }
  }
});

export default DraggableListComponent;