jdanyow/app.html

## app.html
<template>
  <require from="./sortable-custom-attribute"></require>

  <ul sortable="array.bind: left; options.bind: { group: 'test' }">
    <li repeat.for="item of left">${item}</li>
  </ul>
  <ul sortable="array.bind: right; options.bind: { group: 'test' }">
    <li repeat.for="item of right">${item}</li>
  </ul>
</template>

## app.js
export class App {
  left = ['Tesla', 'SpaceX', 'PayPal'];
  right = ['GigaFactory'];
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>
    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script>
      require.config({
        paths: {
          "sortable": "https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min"
        }
      });
    </script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

## sortable-custom-attribute.js
import {inject, bindable, Lazy} from 'aurelia-framework';
import Sortable from 'sortable';

@inject(Element)
export class SortableCustomAttribute {
  @bindable array;
  @bindable options;

  constructor(element) {
    this.element = element;
  }

  onEnd({ item, from, to, newIndex, oldIndex }) {
    // determine the "to" array
    let toArray = item.parentElement.au.sortable.viewModel.array;

    // restore the element's position
    item.parentElement.removeChild(item);
    let referenceElement = from.children[oldIndex];
    if (referenceElement) {
      from.insertBefore(item, referenceElement);
    } else {
      from.appendChild(item);
    }

    // update the "from" array
    let data = this.array.splice(oldIndex, 1)[0];

    // update the "to" array
    toArray.splice(newIndex, 0, data);
  }

  attached() {
    let options = this.options || {};
    options.onEnd = this.onEnd.bind(this);
    this.api = Sortable.create(this.element, options);
  }

  detached() {
    this.api.destroy();
    this.api = null;
    this.repeat = null;
  }
}
	<template>
	<require from="./sortable-custom-attribute"></require>

	<ul sortable="array.bind: left; options.bind: { group: 'test' }">
	<li repeat.for="item of left">${item}</li>
	</ul>
	<ul sortable="array.bind: right; options.bind: { group: 'test' }">
	<li repeat.for="item of right">${item}</li>
	</ul>
	</template>
	export class App {
	left = ['Tesla', 'SpaceX', 'PayPal'];
	right = ['GigaFactory'];
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>
	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script>
	require.config({
	paths: {
	"sortable": "https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min"
	}
	});
	</script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	import {inject, bindable, Lazy} from 'aurelia-framework';
	import Sortable from 'sortable';

	@inject(Element)
	export class SortableCustomAttribute {
	@bindable array;
	@bindable options;

	constructor(element) {
	this.element = element;
	}

	onEnd({ item, from, to, newIndex, oldIndex }) {
	// determine the "to" array
	let toArray = item.parentElement.au.sortable.viewModel.array;

	// restore the element's position
	item.parentElement.removeChild(item);
	let referenceElement = from.children[oldIndex];
	if (referenceElement) {
	from.insertBefore(item, referenceElement);
	} else {
	from.appendChild(item);
	}

	// update the "from" array
	let data = this.array.splice(oldIndex, 1)[0];

	// update the "to" array
	toArray.splice(newIndex, 0, data);
	}

	attached() {
	let options = this.options \|\| {};
	options.onEnd = this.onEnd.bind(this);
	this.api = Sortable.create(this.element, options);
	}

	detached() {
	this.api.destroy();
	this.api = null;
	this.repeat = null;
	}
	}