Skip to content
This repository has been archived by the owner on Mar 12, 2024. It is now read-only.
/ ivy-sortable Public archive

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

License

Notifications You must be signed in to change notification settings

IvyApp/ivy-sortable

Repository files navigation

ivy-sortable

Build Status

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