Question

通过这个Angular项目，我试图创建可以拖动到体内任何位置的元素。我希望这些更改继续存在。

我尝试使用以下位置设置拖动元素的样式：相对，左：{鼠标位置的y值，顶部：{鼠标位置的x值}。

这可行，但是因为您可以从元素的中间拖动元素，所以拖动的元素会跳转，因为左上角位于鼠标的位置，而不是鼠标悬停在元素的位置。

因此，我试图通过查找开始拖动时从元素的左上角到鼠标位置的距离，然后使用差异稍微改变顶部的左样式来弥补这一点。

dragx: Number;
dragy: Number;

dragstart(e){
    let x = e.pageX;
    let y = e.pageY;
    let drag = document.getElementById('drag');
    let rect = drag.getBoundingClientRect();
    let elX = rect.left;
    let elY = rect.top;
    this.dragx = elX - x;
    this.dragy = elY - Y;
    console.log("element position" + elX + ", " + elY);
    console.log("mouse position:" + x + ", " + y);
    console.log("difference" + this.dragx + ", " + this.dragy)
  }

在这段代码中，我只是尝试为全局变量分配一个值，该值表示第一次拖动时鼠标和元素之间的差异。这些将用于拖动功能。

 dragover(e){
    let mousePosition = document.getElementById('mousePosition');
    let drag = document.getElementById('drag');
    let dragPosition = document.getElementById('elPosition');
    let x = e.pageX;
    let y = e.pageY;

    mousePosition.innerHTML = x + ", " + y;
    let rect = drag.getBoundingClientRect();
    dragPosition.innerHTML = rect.left.toString() + ", " + rect.top.toString(); 

    drag.style.position = "absolute";
    drag.style.top = y + "px";
    drag.style.left = x + "px";

    console.log("test" + this.dragy);

  }

问题是，当我尝试访问这些属性时，就像在最后一行中一样，系统告诉我dragy和dragx是未定义的。

也许，我对全局变量或属性或某些东西有基本的误解。我的问题是为什么dragx和dragy未定义？

此外，这是制作可拖动元素的一种好方法还是我使它过于复杂，还是我使用了错误的方法？

谢谢。

---编辑---添加侦听器的位置。

  ngOnInit() {
    //console.log(document);
    this.dataService.getStyling().subscribe((stylings) => {
      this.stylings = stylings;
    });    
    this.el = document.getElementById('drag');
    let dragP = document.getElementById('elPosition');
    let rect = this.el.getBoundingClientRect();
    dragP.innerHTML = rect.left.toString() + ", " + rect.top.toString(); 
    this.el.addEventListener('dragstart', this.dragstart);
    this.el.addEventListener('ondrag', this.ondrag);
    document.addEventListener('dragover', this.dragover);
  }

Answer 1

原因是您的this上下文已丢失。您可以使用类似的内容：

this.el.addEventListener('dragstart', this.dragstart.bind(this));

或

this.el.addEventListener('dragstart', (e) => this.dragstart(e));

请记住，您将需要更改所有addEventListener

人们分配了变量后，Angular 6 / Typescript属性为“未定义”

1 个答案: