ti-ember-sortable

Sortable lists for Ember.js.

JSBin Example -- JSBin example with binding

Usage

Simply include the ti-sortable-list.{amd,cjs,global}.js file your in favorite asset pipeline, or copy/paste, or whatever you like.

Then, just use the component:

{{#ti-ember-sortable items=links class="items__list" action="save"}}
  {{#each link in links}}
	<li>
      <i class="handle">Move</i>
      {{input value=link.label}}
    </li>
  {{/each}}
{{/ti-ember-sortable}}

If you are using ember-cli or ember-app-kit, you will need to use an initializer like so:

//In your Brocfile.js
app.import('node_modules/ti-ember-sortable/dist/ti-ember-sortable.amd.js', {
  exports: {
    'ti-ember-sortable': ['default']
  }
});

import EmberSortable from 'ti-ember-sortable';

export default {
  name: 'ti-ember-sortable',
  initialize: function(container, application) {
    container.register('component:ti-ember-sortable', EmberSortable);
  }
};

Options:

You can specify a handle selector via {{#ti-ember-sortable handle="selector.goes.here"}}. By default this is set to .handle.

You can also specify the draggable selector via {{#ti-ember-sortable draggableSelector="selector.goes.here"}}. By default this is set to li.

Finally, you can specify the class name of the 'ghost' that gets created while dragging via {{#ti-ember-sortable ghostClass="class-goes-here"}} By default this is sortable-ghost.

ps. as with all components, you can specify tagName and class.

Rationale

There are a lot of list sorting libraries out there. Most of them blow up with Ember.js due to the metamorph script tags Ember adds to DOM for databinding:

When you use most of the list sorting libraries out there, the list ends up looking like so:

We do some fancy legwork to remove and reattach correctly, ensuring databinding works great post-sort, but really all the heavy lifting is done by Sortable.

TODO

Tests!

Now that metal-views is out, metamorphs are removed and a lot of this code could probably be cleaned up.