摘要:指令代碼記錄鼠標(biāo)點(diǎn)擊事件的位置記錄鼠標(biāo)點(diǎn)擊事件的位置記錄總偏移量軸記錄總偏移量軸點(diǎn)擊事件監(jiān)聽(tīng)移動(dòng)事件事件判斷該元素是否被點(diǎn)擊了。使用首先將指令在中注冊(cè),在數(shù)組中添加指令。然后在要拖拽的組件上,添加指令,即可實(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)點(diǎn)擊事件的位置 X public disY; // 記錄鼠標(biāo)點(diǎn)擊事件的位置 Y private totalOffsetX = 0; // 記錄總偏移量 X軸 private totalOffsetY = 0; // 記錄總偏移量 Y軸 // 點(diǎn)擊事件 @HostListener("mousedown", ["$event"]) onMousedown(event) { this.isDown = true; this.disX = event.clientX; this.disY = event.clientY; } // 監(jiān)聽(tīng)document移動(dòng)事件事件 @HostListener("document:mousemove", ["$event"]) onMousemove(event) { // 判斷該元素是否被點(diǎn)擊了。 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)聽(tīng)document離開(kāi)事件 @HostListener("document:mouseup", ["$event"]) onMouseup(event) { // 只用當(dāng)元素移動(dòng)過(guò)了,離開(kāi)函數(shù)體才會(huì)觸發(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中注冊(cè),在declarations數(shù)組中添加指令。
然后在要拖拽的組件上,添加指令 appDrag ,即可實(shí)現(xiàn)拖拽功能。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/97185.html
摘要:是瀏覽器的特有屬性實(shí)現(xiàn)拖拽功能我們既然熟悉了這幾個(gè)偏移屬性的意思,那么我們就進(jìn)入我們的重點(diǎn)。當(dāng)然我們同時(shí)也學(xué)習(xí)了的一些方法,例如自定義指令等。 效果圖 showImg(https://upload-images.jianshu.io/upload_images/10414430-93d8911b63914b85.gif?imageMogr2/auto-orient/strip); 分清...
摘要:是瀏覽器的特有屬性實(shí)現(xiàn)拖拽功能我們既然熟悉了這幾個(gè)偏移屬性的意思,那么我們就進(jìn)入我們的重點(diǎn)。當(dāng)然我們同時(shí)也學(xué)習(xí)了的一些方法,例如自定義指令等。 效果圖 showImg(https://upload-images.jianshu.io/upload_images/10414430-93d8911b63914b85.gif?imageMogr2/auto-orient/strip); 分清...
閱讀 3406·2021-11-25 09:43
閱讀 3464·2021-11-19 09:40
閱讀 2464·2021-10-14 09:48
閱讀 1283·2021-09-09 11:39
閱讀 1920·2019-08-30 15:54
閱讀 2821·2019-08-30 15:44
閱讀 1994·2019-08-29 13:12
閱讀 1543·2019-08-29 12:59