資訊專欄INFORMATION COLUMN
摘要：指令代碼記錄鼠標(biāo)點擊事件的位置記錄鼠標(biāo)點擊事件的位置記錄總偏移量軸記錄總偏移量軸點擊事件監(jiān)聽移動事件事件判斷該元素是否被點擊了。使用首先將指令在中注冊，在數(shù)組中添加指令。然后在要拖拽的組件上，添加指令，即可實現(xiàn)拖拽功能。
1. 指令代碼
import { Directive, ElementRef, OnInit, HostListener } from "@angular/core";
@Directive({
selector: "[appDrag]"
})
export class DragDirective implements OnInit {
constructor(public el: ElementRef) {
}
public isDown = false;
public disX; // 記錄鼠標(biāo)點擊事件的位置 X
public disY; // 記錄鼠標(biāo)點擊事件的位置 Y
private totalOffsetX = 0; // 記錄總偏移量 X軸
private totalOffsetY = 0; // 記錄總偏移量 Y軸
// 點擊事件
@HostListener("mousedown", ["$event"]) onMousedown(event) {
this.isDown = true;
this.disX = event.clientX;
this.disY = event.clientY;
}
// 監(jiān)聽document移動事件事件
@HostListener("document:mousemove", ["$event"]) onMousemove(event) {
// 判斷該元素是否被點擊了。
if (this.isDown) {
this.el.nativeElement.style.left = this.totalOffsetX + event.clientX - this.disX + "px";
this.el.nativeElement.style.top = this.totalOffsetY + event.clientY - this.disY + "px";
}
}
// 監(jiān)聽document離開事件
@HostListener("document:mouseup", ["$event"]) onMouseup(event) {
// 只用當(dāng)元素移動過了，離開函數(shù)體才會觸發(fā)。
if (this.isDown) {
console.log("fail");
this.totalOffsetX += event.clientX - this.disX;
this.totalOffsetY += event.clientY - this.disY;
this.isDown = false;
}
}
ngOnInit() {
this.el.nativeElement.style.position = "relative";
}
}
2.使用
首先將指令在Module中注冊，在declarations數(shù)組中添加指令。
然后在要拖拽的組件上，添加指令 appDrag ，即可實現(xiàn)拖拽功能。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/97185.html
摘要：是瀏覽器的特有屬性實現(xiàn)拖拽功能我們既然熟悉了這幾個偏移屬性的意思，那么我們就進入我們的重點。當(dāng)然我們同時也學(xué)習(xí)了的一些方法，例如自定義指令等。 效果圖 showImg(https://upload-images.jianshu.io/upload_images/10414430-93d8911b63914b85.gif?imageMogr2/auto-orient/strip); 分清...
摘要：是瀏覽器的特有屬性實現(xiàn)拖拽功能我們既然熟悉了這幾個偏移屬性的意思，那么我們就進入我們的重點。當(dāng)然我們同時也學(xué)習(xí)了的一些方法，例如自定義指令等。 效果圖 showImg(https://upload-images.jianshu.io/upload_images/10414430-93d8911b63914b85.gif?imageMogr2/auto-orient/strip); 分清...
閱讀 3568·2021-11-25 09:43
閱讀 3609·2021-11-19 09:40
閱讀 2588·2021-10-14 09:48
閱讀 1413·2021-09-09 11:39
閱讀 2022·2019-08-30 15:54
閱讀 2894·2019-08-30 15:44
閱讀 2083·2019-08-29 13:12
閱讀 1622·2019-08-29 12:59
