Skip to content
EmberJS wrapper for the sortable library
JavaScript HTML CSS
Branch: master
Clone or download
Latest commit 049f013 Aug 1, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.dependabot Fix typo May 28, 2019
addon-test-support
addon [CHORE] Remove console.log Aug 1, 2019
app [CHORE] Remove test service Jul 11, 2019
config tests Jul 21, 2019
tests [BUGFIX] Fix the ability to change an option dynamically Aug 1, 2019
vendor Initial Commit from Ember CLI v3.9.0 Apr 11, 2019
.editorconfig
.ember-cli Initial Commit from Ember CLI v3.9.0 Apr 11, 2019
.eslintignore Initial Commit from Ember CLI v3.9.0 Apr 11, 2019
.eslintrc.js [BUGFIX] Fix the ability to change an option dynamically Aug 1, 2019
.gitignore
.npmignore Initial Commit from Ember CLI v3.9.0 Apr 11, 2019
.template-lintrc.js [CHORE] Make the linter happy Jul 18, 2019
.travis.yml
.watchmanconfig Initial Commit from Ember CLI v3.9.0 Apr 11, 2019
CONTRIBUTING.md Initial Commit from Ember CLI v3.9.0 Apr 11, 2019
LICENSE.md [CHORE] Add log. Change license. Jul 18, 2019
README.md [CHORE] Add home page and badges Jul 15, 2019
ember-cli-build.js
ember-sortablejs.png [CHORE] Add log. Change license. Jul 18, 2019
index.js
jsconfig.json Bump base lib. Add onFilter event and setData May 24, 2019
package-lock.json 1.3.1 Aug 1, 2019
package.json
testem.js Initial Commit from Ember CLI v3.9.0 Apr 11, 2019

README.md

ember-sortablejs

Build Status Ember Observer Score

This addon allows you to use drag and drop in your ember application using SortableJS/Sortable

Compatibility

  • Ember.js v2.18 or above
  • Ember CLI v2.13 or above

Installation

ember install ember-sortablejs

Usage

<SortableJs
  @options={{hash animation=150 ghostClass="ghost-class" group="shared-list"}}
  @onChoose={{action "trigger" "onChoose"}}
  @onUnchoose={{action "trigger" "onUnchoose"}}
  @onStart={{action "trigger" "onStart"}}
  @onEnd={{action "trigger" "onEnd"}}
  @onAdd={{action "trigger" "onAdd"}}
  @onUpdate={{action "trigger" "onUpdate"}}
  @onRemove={{action "trigger" "onRemove"}}
  @onMove={{action "trigger" "onMove"}}
  @onClone={{action "trigger" "onClone"}}
  @onChange={{action "trigger" "onChange"}}
  as |sortable|
>
  <ul class="list-group">
    <li class="list-group-item bg-yellow">Item 1</li>
    <li class="list-group-item bg-yellow">Item 2</li>
    <li class="list-group-item bg-yellow">Item 3</li>
    <li class="list-group-item bg-yellow">Item 4</li>
    <li class="list-group-item bg-yellow">Item 5</li>
  </ul>
</SortableJs>

Options

The addon supports all the options that sortable accepts, see: https://github.com/SortableJS/Sortable#options

Options are passed using the {{hash}} helper.

The events:

  • onChoose
  • onUnchoose
  • onStart
  • onEnd
  • onAdd
  • onUpdate
  • onSort
  • onRemove
  • onMove
  • onClone
  • onChange
  • scrollFn
  • onSetData
  • setData
  • onFilter

Should be in the component signature as closure actions. All actions get the events as described in the SortableJS docs as the sortable instance.

License

This project is licensed under the MIT License.

You can’t perform that action at this time.