快捷導(dǎo)航

Angular6實(shí)現(xiàn)拖拽功能指令drag實(shí)例詳解

更新時(shí)間：2023年11月01日 11:59:47 作者：雙木枯榮

這篇文章主要為大家介紹了Angular6實(shí)現(xiàn)拖拽功能指令drag實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jì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)聽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)聽document離開事件
  @HostListener('document:mouseup', ['$event']) onMouseup(event) {
    // 只用當(dāng)元素移動(dòng)過了，離開函數(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)拖拽功能。

以上就是Angular6實(shí)現(xiàn)拖拽功能指令drag實(shí)例詳解的詳細(xì)內(nèi)容，更多關(guān)于Angular6拖拽功能指令drag的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

AngularJS Toaster使用詳解
AngularJS Toaster是一個(gè) AngularJS 提示框.基于angular v1.2.6 及以上和angular-animate.這篇文章主要介紹了AngularJS Toaster使用詳解,需要的朋友可以參考下
2017-02-02
Angular.js?實(shí)現(xiàn)帶手柄自由調(diào)整頁(yè)面大小的功能
這篇文章主要介紹了Angular.js?實(shí)現(xiàn)帶手柄自由調(diào)整頁(yè)面大小的功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-12-12
AngularJs bootstrap搭載前臺(tái)框架——準(zhǔn)備工作
本文主要介紹AngularJs bootstrap搭載前臺(tái)框架，這里對(duì)Bootstrap 搭載環(huán)境，及注意事項(xiàng)做了講解，有需要的小伙伴可以參考下
2016-09-09
對(duì)比分析AngularJS中的$http.post與jQuery.post的區(qū)別
這篇文章主要給大家對(duì)比分析AngularJS中的$http.post與jQuery.post的區(qū)別，十分的詳細(xì)，是篇非常不錯(cuò)的文章，這里推薦給小伙伴們。
2015-02-02
AngularJS實(shí)現(xiàn)使用路由切換視圖的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)使用路由切換視圖的方法,結(jié)合學(xué)生信息管理系統(tǒng)為例分析了使用controllers.js控制器來切換視圖的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下
2017-01-01
AngularJS實(shí)現(xiàn)的輸入框字?jǐn)?shù)限制提醒功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的輸入框字?jǐn)?shù)限制提醒功能,涉及AngularJS事件監(jiān)聽與元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-10-10
總結(jié)AngularJS開發(fā)者最常犯的十個(gè)錯(cuò)誤
AngularJS是如今最受歡迎的JS框架之一，簡(jiǎn)化開發(fā)過程是它的目標(biāo)之一，這使得它非常適合于元型較小的apps的開發(fā)，但也擴(kuò)展到具有全部特征的客戶端應(yīng)用的開發(fā)。下面給大家總結(jié)了AngularJS開發(fā)者最常犯的十個(gè)錯(cuò)誤，有需要的可以參考學(xué)習(xí)下。
2016-08-08
angularjs實(shí)現(xiàn)與服務(wù)器交互分享
AngularJS是Google開發(fā)的純客戶端JavaScript技術(shù)的WEB框架,用于擴(kuò)展、增強(qiáng)HTML功能,它專為構(gòu)建強(qiáng)大的WEB應(yīng)用而設(shè)計(jì)。
2014-06-06
AngularJS安裝版本問題解析
這篇文章主要介紹了AngularJS安裝版本問題解析,在這需要注意在安裝前請(qǐng)確保自己安裝NodeJS環(huán)境版本為V18及以上，否則會(huì)因node版本問題導(dǎo)致項(xiàng)目無(wú)法正常運(yùn)行，需要的朋友可以參考下
2024-02-02
AngularJS入門教程之路由與多視圖詳解
本文主要介紹AngularJS 路由與多視圖詳解，這里整理了相關(guān)資料及示例代碼，詳細(xì)說明了在開發(fā)過程中如何應(yīng)用，有興趣的朋友可以看下
2016-08-08