eriklieben / aurelia-sortablejs

Aurelia plugin to use sortablejs https://github.com/RubaXa/Sortable

aurelia-sortablejs

Aurelia plugin to use the sortablejs library.

Installation

JSPM

Install the package:

jspm i aurelia-sortablejs

Add the following line to src/main.js or src/main.ts:

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
+    .plugin("aurelia-sortablejs");

Aurelia-CLI

Install the package:

npm i aurelia-sortablejs sortablejs --save

Open up the file aurelia_project/aurelia.json and add the following in the bundles, vender-bundle.js dependencies section:

{
  "name": "sortablejs",
  "path": "../node_modules/sortablejs/",
  "main": "sortable"
},
{
  "name": "aurelia-sortablejs",
  "path": "../node_modules/aurelia-sortablejs/dist/amd",
  "main": "index"
},

Add the following line to src/main.js or src/main.ts:

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources')
+    .plugin('aurelia-sortablejs');

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

Usage:

<ul sortable.bind="options">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Each event can be used in the following way:

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

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

aurelia-sortablejs's Issues

File is not bundled

I'm using the Aurelia CLI and my app is failing in production because node_modules\aurelia-sortablejs\dist\amd\sortable.js is missing. So apparently it's not being bundled up for some reason. I've added the folders and file in my production directory as a workaround.

Aurelia Bundle (jspm) do not include sortable.js

Hi, nice helper, only the bundle do not include the following file.

My configuration:

module.exports = {
  "bundles": {
    "dist/app-libs": {
      "includes": [
        "aurelia-framework",
         ...
         
        "sortablejs",
        "aurelia-sortablejs"
      ],
      "options": {
        "inject": true,
        "minify": true,
        "depCache": false,
        "rev": true
      }
    }
  }
};

The /jspm_packages/npm/[email protected]/sortable.js is still loading separate.

Best regards,
George

SortableJS onChoose event missing

I'm submitting a feature request

The sortablejs onChoose event is missing. Can you please add it so we don't have to apply it through the options object?

Great plugin by the way.