Dart SVG Drag and Drop滑动鼠标

Question

我尝试使用SVG在Dart中创建拖放行为。我有BasicUnit s基本上是GElement（<g>）s。现在它有一个body，这是一个RectElement。我正在使用该元素来移动单位。这里是定义：

class BasicUnit { 

    SvgSvgElement canvas; 
    GElement group; 
    RectElement body; 
    bool dragging; 
    num dragOffsetX, dragOffsetY, width, height; 

    BasicUnit(SvgSvgElement this.canvas, num x, num y, num this.width, num this.height) { 
    this.body = new RectElement(); 
    this.body.setAttribute('x', '$x'); 
    this.body.setAttribute('y', '$y'); 
    this.body.setAttribute('width', '$width'); 
    this.body.setAttribute('height', '$height'); 
    this.body.classes.add('processing_body'); 

    this.body.onMouseDown.listen(select); 
    this.body.onMouseMove.listen(moveStarted); 
    this.body.onMouseUp.listen(moveCompleted); 
    this.body.onMouseLeave.listen(moveCompleted); 

    this.group = new GElement(); 
    this.group.append(this.body); 

    this.dragging = false; 
    } 

    void select(MouseEvent e) { 
    e.preventDefault(); 
    this.dragging = true; 

    var mouseCoordinates = getMouseCoordinates(e); 
    this.dragOffsetX = mouseCoordinates['x'] - body.getCtm().e; //double.parse(body.attributes['x']); 
    this.dragOffsetY = mouseCoordinates['y'] - body.getCtm().f; 
    } 

    void moveStarted(MouseEvent e) { 
    e.preventDefault(); 

    if (dragging) { 
     var mouseCoordinates = getMouseCoordinates(e); 
     num newX = mouseCoordinates['x'] - dragOffsetX; 
     num newY = mouseCoordinates['y'] - dragOffsetY; 
     this.body.setAttribute('transform', 'translate($newX, $newY)'); 
    } 
    } 

    void moveCompleted(MouseEvent e) { 
    e.preventDefault(); 
    this.dragging = false; 
    } 

    dynamic getMouseCoordinates(e) { 
    return {'x': (e.offset.x - this.canvas.currentTranslate.x)/this.canvas.currentScale, 
      'y': (e.offset.y - this.canvas.currentTranslate.y)/this.canvas.currentScale}; 
    } 
} 

我有一个Application对象。对于给定的id，它得到svg元素。这里的定义是：

class Application { 
    int WIDTH = 80, HEIGHT = 60; 
    SvgSvgElement canvas; 

    Application(canvas_id) { 
    this.canvas = document.querySelector(canvas_id); 
    this.canvas.onDoubleClick.listen((MouseEvent e) => addUnit(e)); 
    } 

    void addUnit(MouseEvent e) { 
    num x = e.offset.x - WIDTH/2; 
    num y = e.offset.y - HEIGHT/2; 
    BasicUnit newUnit = new BasicUnit(this.canvas, x, y, WIDTH, HEIGHT); 
    this.canvas.append(newUnit.group); 
    } 
} 

我的问题是，我的鼠标滑过BasicUnit或<g>元素。当您选择靠近其边缘的元素并尝试拖动时，突然元素会被删除。如果您尝试快速拖放，那也是如此。我试图按照this webpage上的示例进行操作，但无法弄清楚问题所在。

UPDATE 完整源代码可用here。

UPDATE II Here是一个演示。

Answer 1

浏览器尝试拖动双击该页面后选定的文本。这可以很容易地通过防止默认行为的onmousedown事件事件（你的选择方法）是固定的：

void select(MouseEvent e) { 
    e.preventDefault(); 
    this.dragging = true; 
    this.group.parentNode.append(this.group); 

    var mouseCoordinates = this.getMouseCoordinates(e); 
    this.dragOffsetX = mouseCoordinates['x'] - this.body.getCtm().e;   
    this.dragOffsetY = mouseCoordinates['y'] - this.body.getCtm().f; 
} 

另一个问题是由SVG不拉丝速度不够快，跟上鼠标坐标引起的。所以，当移动速度足够快时，鼠标坐标移动到SVG元素的主体之外，因此该元素将不再获取鼠标移动事件。这可以通过监听背景SVG元素（帆布在你的例子）上的OnMouseMove和OnMouseLeave在事件得到解决，而不是元素的移动：

body.onMouseDown.listen(select); 
canvas.onMouseMove.listen(moveStarted); 
body.onMouseUp.listen(moveCompleted); 
canvas.onMouseLeave.listen(moveCompleted); 

编辑：

采用上述方法的工作，除非当拖动的元素位于另一个元素的下方时，会发生onMouseUp，在这种情况下，该元素仍在拖动，直到该元素上发生另一个onMouseUp事件，或者光标移动到查看区域之外。这可以通过固定只听的画布，而不是身体上onMouseUp事件：

canvas.onMouseUp.listen(moveCompleted); 

见this example。

此外，在点击元素（在您的select方法中）时打开onMouseMove，onMouseUp和onMouseLeave侦听器，然后禁用onMouseUp和onMouseLeave（moveCompleted方法）上的侦听器可能会更好。我在上面的例子中已经完成了这个。