ti-ember-sortable

Sortable lists for Ember.js.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ti-ember-sortable
1623.0.06 years ago6 years agoMinified + gzip package size for ti-ember-sortable in KB

Readme

ti-ember-sortable
Sortable lists for Ember.js.
Sortable Example
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:
Lots of script tags
When you use most of the list sorting libraries out there, the list ends up looking like so:
Mangled script tags
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.