angular 支持事件 touchstart、touchend 和 touchmove。所以你可以想象这样一个指令：
export interface TouchEventType {
element: TouchDirective;
incrX: number;
incrY: number;
}
@Directive({
selector: '[touch]',
exportAs: 'touch'
})
export class TouchDirective {
origin: any = { x: 0, y: 0 };
style: any = null;
rect: any = { x: 0, y: 0 };
incrX: number = 0;
incrY: number = 0;
@Input('touch') direction: 'horizontal' | 'vertical' | null = null;
@Output() touchMove: EventEmitter<any> = new EventEmitter<any>();
@HostListener('touchstart', ['$event']) touchStart(event) {
this.origin = {
x: event.touches[0].screenX,
y: event.touches[0].screenY
};
}
@HostListener('touchmove', ['$event']) touch(event: TouchEvent) {
this.incrX = this.rect.x + event.touches[0].screenX - this.origin.x;
this.incrY = this.rect.y + event.touches[0].screenY - this.origin.y;
this.style =
this.direction == 'horizontal'
? {
transform: 'translateX(' + this.incrX + 'px)'
}
: this.direction == 'vertical'
? {
transform: 'translateY(' + this.incrY + 'px)'
}
: {
transform: 'translateY(' + this.incrX + 'px,' + this.incrY + 'px)'
};
if (this.direction)
window.scrollBy(this.direction=='horizontal'?
event.touches[0].screenX - this.origin.x:0,
this.direction=='vertical'?
event.touches[0].screenY - this.origin.y:0)
}
@HostListener('touchend', ['$event']) touchEnd() {
this.rect = { y: this.incrY, x: this.incrX };
this.touchMove.emit({
element: this,
incrX: this.incrX,
incrY: this.incrY
});
}
@HostBinding('style') get _() {
return this.style;
}
constructor(private elementRef: ElementRef) {}
reset() {
this.style = null;
this.rect = { x: 0, y: 0 };
}
}
你可以在.html中使用
<ng-container *ngFor="let item of array;let i=index">
<p touch='horizontal' (touchMove)="touchmove($event,i)">
Start editing to see some magic happen {{item}}
</p>
</ng-container>
array:any[]=[1,2,3,4,5,6,7]
touchmove(event:TouchEventType,index:number)
{
if (event.incrX<-10) //10px to the left
this.array.splice(index,1)
else
event.element.reset()
}
查看stackblitz，不提供任何担保
更新如果我们希望这项工作在触摸屏和非触摸屏中，我们可以采取另一种方法。我们可以使用fromEvent rxjs 运算符来代替使用@HostListener。 （否则我们需要在 mousedown、mouseup 和 mousemove 上创建一个 hostListenr）
为了控制触摸事件和鼠标事件，我们使用 rxjs 合并操作符，它从两个 observable 接收值。为了使用完全相同的代码，我们在触摸事件中使用“map”来转换 MouseEvent 中的响应（一个 TouchEvent）。
最后一点是使用“点击”来判断是否是触摸屏。在触摸屏中，如果我们向下/向上滑动，我们需要滚动窗口 dwon/up 是我们的指令只允许水平移动
@Directive({
selector: '[touch]',
exportAs: 'touch'
})
export class TouchDirective {
origin: any = { x: 0, y: 0 };
style: any = null;
rect: any = { x: 0, y: 0 };
incrX: number = 0;
incrY: number = 0;
onDrag:boolean=false;
isTouched:boolean=false;
moveSubscription: any;
downSubscription: any;
@Input('touch') direction: 'horizontal' | 'vertical' | null = null;
@Output() touchMove: EventEmitter<any> = new EventEmitter<any>();
@HostBinding('style') get _() {
return this.style;
}
@HostBinding('class.no-select') get __() {
return this.onDrag;
}
constructor(private elementRef: ElementRef) {}
ngOnInit() {
this.downSubscription=merge(
fromEvent(this.elementRef.nativeElement, 'mousedown').pipe(tap(_=>this.isTouched=false)),
fromEvent(this.elementRef.nativeElement, 'touchstart').pipe(tap(_=>this.isTouched=true),
map((event: TouchEvent) => ({
target: event.target,
screenX: event.touches[0].screenX,
screenY: event.touches[0].screenY
}))
)
).subscribe((event: MouseEvent) => {
//see that is the same code that @HostListener('touchstart', ['$event'])
this.origin = {
x: event.screenX,
y: event.screenY
};
this.onDrag=true;
merge(fromEvent(document, 'mouseup'), fromEvent(document, 'touchend'))
.pipe(take(1))
.subscribe(() => {
//see that is the same code that @HostListener('touchend', ['$event'])
if (this.moveSubscription) {
this.moveSubscription.unsubscribe();
this.moveSubscription = undefined;
}
this.rect = { y: this.incrY, x: this.incrX };
this.touchMove.emit({
element: this,
incrX: this.incrX,
incrY: this.incrY
});
this.onDrag=false;
});
if (!this.moveSubscription) {
this.moveSubscription = merge(
fromEvent(document, 'mousemove'),
fromEvent(document, 'touchmove').pipe(
map((event: TouchEvent) => ({
target: event.target,
screenX: event.touches[0].screenX,
screenY: event.touches[0].screenY
}))
))
.subscribe((event: MouseEvent) => {
//see that is the same code that @HostListener('touchmove', ['$event'])
this.incrX = this.rect.x + event.screenX - this.origin.x;
this.incrY = this.rect.y + event.screenY - this.origin.y;
this.style =
this.direction == 'horizontal'
? {
transform: 'translateX(' + this.incrX + 'px)'
}
: this.direction == 'vertical'
? {
transform: 'translateY(' + this.incrY + 'px)'
}
: {
transform: 'translateY(' + this.incrX + 'px,' + this.incrY + 'px)'
};
if (this.direction && this.isTouched)
window.scrollBy(
this.direction == 'horizontal'
? event.screenX - this.origin.x
: 0,
this.direction == 'vertical'
? event.screenY - this.origin.y
: 0
);
})
}
});
}
ngOnDestroy() {
this.downSubscription.unsubscribe();
}
reset() {
this.style = null;
this.rect = { x: 0, y: 0 };
}
}
我们添加类
.no-select {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
在styles.css 和
@HostBinding('class.no-select') get __() {
return this.onDrag;
}
当元素滑动时不选择
stackblitz 用于触摸/非触摸屏