Stupid mouse move coordinates in dart

Question

I am learning Dart and I was trying to make a very simple drageable HTML element. I followed patterns I'm used to from javascript but it doesn't work as expected.

When making drageable object from scratch you usually do the following:

1. Listen on mouse down event on that object
2. Upon mouse down, remember mouse coordinates relative to the object's top-left corner
3. Listen for any mouse movement. For every move operation, move the object to cursor location minus the coordinates you remembered earlier.
4. Upon any mouse up event, stop following mouse movement.

So I produced this code:

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;
  }
}

Problem is, that some coordinates delivered by MouseMove are complete nonsense. See the console:

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)

As you can see every second mouse move event delivers broken data - coordinates right around [0, 0]. So how can I filter out this invalid data? Why does it happen?

So far I'm probably fixing this by adding:

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

Answer 1

Use e.client.x/e.client.y instead.