I am trying to write an attached aurelia behavior for https://github.com/RubaXa/Sortable that allows you to reorder items in a list using html 5 drag and drop to the one they have for AngularJS. So far, dragging and dropping html elements works fine with the following template code
<template>
<require from="./sortable"></require>
<section>
<h2>${title}</h2>
<ul sortable>
<li repeat.for="item of items">${item.title}</li>
</ul>
</section>
</template>
and attached behavior
import {Behavior} from 'aurelia-framework';
import Sortable from 'rubaxa-sortable';
export class SortableAttachedBehavior {
static metadata() {
return Behavior
.attachedBehavior('sortable');
}
static inject() {
return [Element];
}
constructor(element) {
this.element = element;
}
bind(viewModel) {
this.sortable = Sortable.create(this.element);
}
unbind() {
this.sortable.destroy();
this.sortable = null;
}
}
As a next step, in addition to reordering the html elements, I also want to reorder the data elements in the model. I can get the necessary dnd events from the sortable instance that I have. My problem is to get a link to the items.
, sub repeat.for, , Repeat . Repeat?
( , )?
,