Angular6 实现拖拽功能指令 drag

isLishude 发布于2019-08-23 11:36 / 1379人阅读

摘要：指令代码记录鼠标点击事件的位置记录鼠标点击事件的位置记录总偏移量轴记录总偏移量轴点击事件监听移动事件事件判断该元素是否被点击了。使用首先将指令在中注册，在数组中添加指令。然后在要拖拽的组件上，添加指令，即可实现拖拽功能。

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; // 记录鼠标点击事件的位置 X

  public disY; // 记录鼠标点击事件的位置 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;
  }

  // 监听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";
    }
  }

  // 监听document离开事件
  @HostListener("document:mouseup", ["$event"]) onMouseup(event) {
    // 只用当元素移动过了，离开函数体才会触发。
    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数组中添加指令。
然后在要拖拽的组件上，添加指令 appDrag ，即可实现拖拽功能。

GPU云服务器云服务器实现拖拽 js实现数据拖拽原生js实现拖拽指令实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97185.html

基于Vue实现拖拽效果

摘要：是浏览器的特有属性实现拖拽功能我们既然熟悉了这几个偏移属性的意思，那么我们就进入我们的重点。当然我们同时也学习了的一些方法，例如自定义指令等。效果图 showImg(https://upload-images.jianshu.io/upload_images/10414430-93d8911b63914b85.gif?imageMogr2/auto-orient/strip); 分清...

韩冰 2019-08-22 16:40 评论0 收藏0
基于Vue实现拖拽效果

摘要：是浏览器的特有属性实现拖拽功能我们既然熟悉了这几个偏移属性的意思，那么我们就进入我们的重点。当然我们同时也学习了的一些方法，例如自定义指令等。效果图 showImg(https://upload-images.jianshu.io/upload_images/10414430-93d8911b63914b85.gif?imageMogr2/auto-orient/strip); 分清...

thursday 2019-08-29 15:09 评论0 收藏0