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

回答

相關問題