isabella232 / ivy-sortable

Ember helper for interacting with jQuery UI's Sortable module.

ivy-sortable

An Ember component for jQuery UI's Sortable Widget.

Installation

As an ember-cli addon:

npm install --save-dev ivy-sortable
ember generate ivy-sortable

Or if you aren't using ember-cli, you can use this library as a standalone Bower package:

bower install --save ivy-sortable

...and then add the ivy-sortable.js script to your page.

Usage

Use the ivy-sortable view with Ember's built-in collection helper.

{{#collection "ivy-sortable" content=people}}
  Greetings, {{name}}!
{{/collection}}

This will output a sortable list, and dragging and dropping items will reorder them in the corresponding array (in this case, people). There is also a moved action that will fire after an item has been moved, in case you want to take further action:

{{#collection content=people moved="movePerson"}}
  Greetings, {{name}}!
{{/collection}}

In this case the movePerson handler will be called with the item that has been moved, and its old and new index:

App.ApplicationController = Ember.Controller.extend({
  actions: {
    movePerson: function(person, oldIndex, newIndex) {
      // ...
    }
  }
});

The following jQuery UI Sortable options are supported:

• axis
• containment
• cursorAt
• cursor
• delay
• disabled
• distance
• forceHelperSize
• forcePlaceholderSize
• grid
• handle
• helper
• opacity
• placeholder
• revert
• scrollSensitivity
• scrollSpeed
• scroll
• tolerance
• zIndex

If there's an option that you need that isn't supported, you can easily add it in your own app by extending from 'ivy-sortable/views/ivy-sortable' and adding it to the uiOptions property like so:

import IvySortableView from 'ivy-sortable/views/ivy-sortable';

export default IvySortableView.extend({
  uiOptions: [
    'someOtherOption'
  ]
});

Contributing

Fork this repo, make a new branch, and send a pull request. Make sure your change is tested or it won't be merged.

To run tests:

git clone # <this repo>
npm install
npm test

Or, to start a test server that continually runs (for development):

ember test --server