drag a svg rect

当我尝试拖动像下面这样的svg矩形时，它首先选择我的页面上的任何文本，然后变为可拖动。我怎样才能使它最初可拖动？drag a svg rect

<g 
     onDragStart={this.onDragStart} 
     onDrag={this.onDrag} 
     onDragEnd={this.onDragEnd}> 
    <rect></rect> 
    <text>{text}</text> 
</g>

我使用的反应，这里有我的组件的功能：

onDragStart = (event) => { 
    this.setState({ 
     dx: event.clientX - this.state.x, 
     dy: event.clientY - this.state.y 
    }); 
    }; 

    onDrag = (event) => { 
    this.setState({ 
     x: event.clientX - this.state.dx, 
     y: event.clientY - this.state.dy 
    }); 
    }; 

    onDragEnd = (event) => { 
    this.setState({ 
     x: event.clientX - this.state.dx, 
     y: event.clientY - this.state.dy 
    }); 
    };

来源

2017-05-27 svnvav

这听起来像你只是在谈论[这]（https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css）？ –

@Chris W.在添加.noselect类后，它实际上并不选择rect内的文本，但它仍然看起来像一个选择（鼠标光标），并且在我不选择svg之前它仍然是不可碎的。 – svnvav

所以，我发现问题不是文字标签。它发生在我使用rect的时候。值得注意的是，它适用于圆圈。 – svnvav

原来，我应该使用onmousedown事件，的OnMouseMove，和鼠标移开事件onMouseUp添加一个布尔值属性“主动”在组件状态。现在它可以工作。

<g 
    onMouseDown={this.onDragStart} 
    onMouseMove={this.onDrag} 
    onMouseOut={this.onDrag} 
    onMouseUp={this.onDragEnd}> 
    <rect></rect> 
    <text>{text}</text> 
</g> 

    onDragStart = (event) => { 
    this.setState({ 
     active: true, 
     dx: event.clientX - this.state.x, 
     dy: event.clientY - this.state.y 
    }); 
    }; 

    onDrag = (event) => { 
    if(this.state.active) 
     this.setState({ 
     x: event.clientX - this.state.dx, 
     y: event.clientY - this.state.dy 
     }); 
    }; 

    onDragEnd = (event) => { 
    this.setState({ 
     active: false, 
     x: event.clientX - this.state.dx, 
     y: event.clientY - this.state.dy 
    }); 
    };

来源

2017-05-28 11:38:46 svnvav

回答

相关问题