Comments (6)
I see. I will probably just add 2nd argument to the callback for single list use case only. If I leave the multi-list use case out, it's simple to implement.
from bcx-aurelia-dnd.
use bcx-aurelia-reorderable-repeat v1.1.0, there is 2nd argument in shape {fromIndex, toIndex}
for single list mode.
Note only reorderable-after-reordering="methodName"
gets the 2 arguments passed in. Not the reorderable-after-reordering.call="method(...)"
, where arguments were provided by you explicitly.
from bcx-aurelia-dnd.
About few months ago I removed some part of the doc that covers your usage. Maybe I need to add them back, or enhance the callback.
Inspect the changes from collection observer, it got what you want.
With Aurelia, you actually don't need this callback. The generic solution is to use Aurelia BindingEngine
's collectionObserver
. Here is some sample code on how to do that.
import {inject, BindingEngine} from 'aurelia-framework';
@inject(BindingEngine)
export class YourComponent {
items = [ /* ... */ ];
constructor(bindingEngine) {
this.bindingEngine = bindingEngine;
}
attached() {
this._subscriber = this.bindingEngine.collectionObserver(this.items).subscribe((changes) => {
// `this.items` here is the updated array.
// `changes` is the aurelia collection mutation, if you know what to inspect it.
});
}
detached() {
this._subscriber.dispose();
}
}
This solution catches all mutation on
items
array, no matter whether the change is triggered byreorderable-repeat
.
For only listening to changes triggered by
reorderable-repeat
, use "reorderable-after-reordering" callback.
from bcx-aurelia-dnd.
The collection observer is definitely not intuitive. I will enhance the callback to add 2nd argument, I just need to think through the shape of object, because in multi-list reordering, fromIndex and toIndex can be on two different arrays.
If you have any suggestion on the shape, let me know. Thanks!
from bcx-aurelia-dnd.
So I'm currently working on that, but for a single list. It's tricky to get the information out properly. What I have now is very convoluted and fragile but works:
async reorder(changes: ICollectionObserverSplice[]) {
// Added this condition because the method is invoked
// whenever I add/remove items from the list as well
if (changes.length === 2) {
let oldOrder: number;
let newOrder: number;
let movedItem;
if (changes[0].removed.length > 0) {
// We end up here when moving from top (0) toward bottom (> 0)
oldOrder = changes[0].index + 1;
newOrder = changes[1].index + 1;
movedItem = changes[0].removed[0];
} else {
// We end up here when moving from bottom (> 0) toward top (0)
oldOrder = changes[1].index;
newOrder = changes[0].index + 1;
movedItem = changes[1].removed[0];
}
// ...
}
}
There are +1
s in some places because I store my order starting from 1 instead of 0.
from bcx-aurelia-dnd.
Wow that's great man. Feature development on call! Works perfectly, thank you!
from bcx-aurelia-dnd.
Related Issues (17)
- When `noPreview` is true, iPad shows weird behaviour when starting a drag HOT 1
- preview and position are broken in IE11
- Request for a couple of examples HOT 7
- Crosstalk HOT 6
- Scroll up/down while dragging items? HOT 6
- Possible? Move source out of target HOT 2
- Block incoming items HOT 6
- Typescript support update HOT 3
- TODO: support esc key to cancel a dnd session HOT 1
- preview on element with unknown tagName (like `<my-comp>`) has broken size. HOT 1
- Having issue with getterThrottle HOT 2
- JSDoc types can only be used inside documentation comments. HOT 3
- Idea for resizing HOT 5
- source element blocks <a> route jump on mobile device HOT 1
- HTML code HOT 1
- Fix 1px offset in examples HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bcx-aurelia-dnd.