angular2-draggable
angular2-draggable copied to clipboard
Reset translate every x pixels
Let’s say we have the list of items:
- Item1
- Item2
- Item3
The list is rendered from the array [1,2,3]
using *ngFor
directive.
Each item is draggable and we want to have the ability to swap them.
So, we drag Item1
to the bottom of Item2
, and change the array to [2,1,3]
.
The issue is now Item1
has previous translateY
value but new position in the view.
See example to understand: https://stackblitz.com/edit/angular-gitter-nqpzle
Idea how can be hotfixed:
@Input() resetTranslateXEvery: number;
@Input() resetTranslateYEvery: number;
if (this.resetTranslateXEvery) {
translateX = translateX % this.resetTranslateXEvery;
}
if (this.resetTranslateYEvery) {
translateY = translateY % this.resetTranslateYEvery;
}
@yavulan Interesting idea. But the two inputs are a little quirky in other scenarios. Dragging blocks would fly away from the mouse pointer. I prefer a more general solution. Do you have any other suggestion?
I do not like this approach either.
An idea of a bit more generalized approach, where all the responsibility is on the end user:
@Input() hookTransform: (currentValues: {translate: IPosition}) => string;
and instead of this:
let value: string;
if (this.hookTransform) {
value = this.hookTransform({translate: {x: translateX, y: translateY}});
} else {
value = `translate(${translateX}px, ${translateY}px)`;
}
Or, for example:
@Input() hookTransformTranslate: (values: IPosition) => IPosition;
and
if (this.hookTransformTranslate) {
({x: translateX, y: translateY} = this.hookTransformTranslate({x: translateX, y: translateY}));
}