# aurelia-sortablejs

> A plugin to use SortableJS with Aurelia.

Latest version **1.1.0** (published 2018-10-08) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

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

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2018-10-08 |
| First published | 2016-09-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 111.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Erik Lieben |
| Maintainers | eriklieben |
| Keywords | aurelia, sortablejs, sortable.js |

## Links

- npm: https://www.npmjs.com/package/aurelia-sortablejs
- Repository: https://github.com/eriklieben/aurelia-sortablejs
- Issues: https://github.com/eriklieben/aurelia-sortablejs/issues
- npm.io page: https://npm.io/package/aurelia-sortablejs

## Dependencies (2)

- [sortablejs](https://npm.io/package/sortablejs.md) 1.7.0
- [aurelia-framework](https://npm.io/package/aurelia-framework.md) ^1.0.2

## 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.1.0 (latest) — 2018-10-08
- 1.0.0 — 2016-09-12
- 0.0.3 — 2016-09-12
- 0.0.2 — 2016-09-12

## README

[![Build Status](https://dev.azure.com/erik/aurelia-sortablejs/_apis/build/status/eriklieben.aurelia-sortablejs)](https://dev.azure.com/erik/aurelia-sortablejs/_build/latest?definitionId=12)

# aurelia-sortablejs

Aurelia plugin to use the [sortablejs](https://github.com/rubaxa/Sortable) library.

# Installation

## Aurelia-CLI (RequireJS)

Install the package:
```
au install aurelia-sortablejs
```

Add the following line to ```src/main.js``` or ```src/main.ts```:
```diff
export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources')
+    .plugin('aurelia-sortablejs');

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }
```

## Aurelia-CLI (SystemJS)

Install the package:
```
au install aurelia-sortablejs
```

Add the following line to ```src/main.js``` or ```src/main.ts```:
```diff
export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources')
+    .plugin('aurelia-sortablejs');

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }
```

## Aurelia-CLI (Webpack)

Install the package:
```
yarn add aurelia-sortablejs
```

Add the following line to ```src/main.js``` or ```src/main.ts```:
```diff
export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature(PLATFORM.moduleName('resources'))
+   .plugin(PLATFORM.moduleName('aurelia-sortablejs'));

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }
```

## Usage:
```html
<ul sortable.bind="options">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>
```

Each event can be used in the following way:

```html
<ul sortable.bind="options" sortable-move.delegate="func($event)">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>
```

```javascript
export class Home {
  public func(customEvent: CustomEvent) {
    let event = customEvent.detail;
    console.log("event", event);
  }
}
```

## sortable
The following attributes can be set to catch events

| Attribute        | Sortablejs event | Description 
| ---------------- | ---------------- | --------------
| sortable-add     | onAdd            | Element is dropped into the list from another list
| sortable-end     | onEnd            | Dragging ended 
| sortable-filter  | onFilter         | Attempt to drag a filtered element
| sortable-move    | onMove           | Event when you move an item in the list or between lists 
| sortable-remove  | onRemove         | Element is removed from the list into another list 
| sortable-sort    | onSort           | Called by any change to the list (add / update / remove) 
| sortable-start   | onStart          | Dragging started 
| sortable-update  | onUpdate         | Changed sorting within list

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