# ember-sortablejs

> EmberJS wrapper for SortableJS

Latest version **1.3.1** (published 2019-08-01) · GPL-3.0-only license · 0 weekly downloads

## Install

```sh
npm install ember-sortablejs
pnpm add ember-sortablejs
yarn add ember-sortablejs
bun add ember-sortablejs
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2019-08-01 |
| First published | 2019-04-11 |
| Weekly downloads | 0 |
| License | GPL-3.0-only |
| TypeScript types | none |
| Module format | CommonJS |
| Node | 6.* \|\| 8.* \|\| >= 10.* |
| Dependencies | 5 |
| Unpacked size | 63 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13 |
| Author | Luis Vegerano |
| Maintainers | lvegerano |
| Keywords | ember-addon, ember, ember-cli, sortable, sortablejs, drag, drop, drag and drop |

## Links

- npm: https://www.npmjs.com/package/ember-sortablejs
- Repository: https://github.com/SortableJS/ember-sortablejs
- Homepage: https://github.com/SortableJS/ember-sortablejs#readme
- Issues: https://github.com/SortableJS/ember-sortablejs/issues
- npm.io page: https://npm.io/package/ember-sortablejs

## Dependencies (5)

- [sortablejs](https://npm.io/package/sortablejs.md) ^1.9.0
- [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) ^7.1.2
- [ember-diff-attrs](https://npm.io/package/ember-diff-attrs.md) ^0.2.2
- [ember-auto-import](https://npm.io/package/ember-auto-import.md) ^1.2.21
- [ember-cli-htmlbars](https://npm.io/package/ember-cli-htmlbars.md) ^3.0.0

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.3.1 (latest) — 2019-08-01
- 2.0.0-beta.6 (beta) — 2020-05-06
- 2.0.0-beta.5 — 2020-03-27
- 2.0.0-beta.4 — 2020-03-23
- 2.0.0-beta.3 — 2020-03-18
- 2.0.0-beta.2 — 2020-03-02
- 2.0.0-beta.0 — 2020-01-16
- 1.3.0 — 2019-07-22
- 1.2.0 — 2019-05-24
- 1.1.0 — 2019-04-12
- 1.0.0 — 2019-04-11

## README

ember-sortablejs
==============================================================================
[![Build Status](https://travis-ci.org/SortableJS/ember-sortablejs.svg?branch=master)](https://travis-ci.org/SortableJS/ember-sortablejs)
[![Ember Observer Score](https://emberobserver.com/badges/ember-sortablejs.svg)](https://emberobserver.com/addons/ember-sortablejs)

This addon allows you to use drag and drop in your ember application using [SortableJS/Sortable](https://github.com/SortableJS/Sortable)


Compatibility
------------------------------------------------------------------------------

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


Installation
------------------------------------------------------------------------------

```
ember install ember-sortablejs
```


Usage
------------------------------------------------------------------------------

```html
<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](LICENSE.md).

---
_Source: https://npm.io/package/ember-sortablejs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._