README

ember-cli-sortable

This is an ember-cli addon that integrates RubaXa's Sortable plugin with Ember. It is still rough around the edges but works pretty well and is currently being used in production.

Installation

ember install:npm ember-cli-sortable
ember generate ember-cli-sortable

Usage

{{sortable-items
  itemCollection=someArray
  animation=100
  handle=".item__handle"
  filter=".item--pinned"
  draggable=".item"
  ghostClass="item--ghost"
  onItemMoveAction="itemMoved"
  templateName="sortable-items-partial"
  noItemText="<div style='text-align:center'>No items found</div>"
}}

You'll then need a partial named sortable-items-partial that will have access to item This template will be looped over all the items in the array.

sortable-items-partial.hbs

<div class="item">
  <div class="item__handle">{{item.name}}</div>
  <div class="item__sub">{{item.content}}</div>
</div>

You'll also need an itemMoved action handler in your controller / parent component as per the example above.

Supports all properties and callbacks from RubaXa's Sortable

Properties

sort
disabled
store
animation
handle
filter
draggable
ghostClass
scroll
scrollSensitivity
scrollSpeed

Callbacks

onStart
onAdd
onEnd
onUpdate
onSort
onRemove
onFilter

Add Action at the end of each callback to specify your own action handlers

Example

{{sortable-items
  onStartAction="myStartAction"
  onAddAction="myAddAction"
  ...
  ...
  ...
}}

Contribution

Fork this repository, make a feature branch and send in a pull request.

Usage no npm install needed!