愚蠢的鼠标在飞镖中移动坐标

Question

我正在学习 Dart，我正在尝试制作一个非常简单的可拖动 HTML 元素。我遵循了 javascript 中习惯的模式，但它没有按预期工作。

从头开始制作可拖动对象时，您通常会执行以下操作：

侦听该对象上的鼠标按下事件
鼠标按下时，记住鼠标相对于对象左上角的坐标
监听任何鼠标移动。对于每个移动操作，将对象移动到光标位置减去您之前记住的坐标。
发生任何鼠标松开事件时，停止跟随鼠标移动。

所以我生成了这段代码：

class DrageableControl {
  DivElement _elm;
  DrageableControl(String txt, int x, int y) {
    //Create element and set up styles
    var elm = this.setupElement(x, y);
    //Append element to document, add some text and start listeners
    document.body.append(elm);
    elm.text = txt;
    setupEvents();
  }
  //This function creates all event necessary for drag operations
  setupEvents() {
    Point relativeMouseOffset = null;
    _elm.onMouseDown.listen((MouseEvent e) {
      Rectangle myPos = _elm.getBoundingClientRect();
      relativeMouseOffset = new Point(e.offset.x-myPos.left, e.offset.y-myPos.top);
      e.preventDefault();
      return false;
    });
    //Of course this is completely wrong, the listener should only be added for the duration of dragging
    document.onMouseMove.listen((MouseEvent e) {
      if(relativeMouseOffset!=null) {
        print("Clicked at: ${relativeMouseOffset}\nCurrent mouse position:${e.offset}");
        _elm.style.top = "${(e.offset.y/*-relativeMouseOffset.y*/)}px";
        _elm.style.left = "${(e.offset.x/*-relativeMouseOffset.x*/)}px";
      }
    });

    document.onMouseUp.listen((MouseEvent e){
      relativeMouseOffset = null;
    });
  }



  setupElement(int x, int y) {

    var elm = this._elm = new DivElement();
    //TODO: Use css?
    elm.style.position = "absolute";
    elm.style.top = "${y}px";
    elm.style.left = "${x}px";
    elm.style.border = "1px solid red";
    elm.style.backgroundColor = "#FFAAAA";
    elm.style.cursor = "default";
    //elm.style.transition = "top 1s";
    return elm;
  }
}

问题是，MouseMove 提供的某些坐标完全是胡说八道。查看控制台：

Clicked at: Point(-76.0, -143.0)
Current mouse position:Point(1, 1)
Clicked at: Point(-76.0, -143.0)
Current mouse position:Point(374, 272)
Clicked at: Point(-76.0, -143.0)
Current mouse position:Point(1, 0)
Clicked at: Point(-76.0, -143.0)
Current mouse position:Point(376, 273)
Clicked at: Point(-76.0, -143.0)
Current mouse position:Point(0, 1)

如您所见，每秒鼠标移动事件都会传送损坏的数据 - 坐标就在 [0, 0] 附近。那么如何过滤掉这些无效数据呢？为什么会这样？

到目前为止，我可能通过添加以下内容来解决此问题：

 if(e.offset.x+e.offset.y<5)
    return;

Answer 1

改用e.client.x/e.client.y。

愚蠢的鼠标在飞镖中移动坐标

Stupid mouse move coordinates in dart

dart