React SVG 拖放和鼠标移动

Question

这是我的 svg 代码：

    import React from 'react';
    import ReactDOM from 'react-dom';

    class DragArea extends React.Component {
        state = {
            viewWidth: 800,
            viewHeight: 1000,
            gridSize: 40,
            vbox: {
                x: 0,
                y: 0,
                w: 800,
                h: 1000
            },
            dragAreaWidth: this.props.width * 40,
            dragAreaHeight: this.props.length * 40
        }

        onmousedown = () => {return false;}

        ondragdstart = () => {return false;}

        componentDidMount() {
            let viewHeight = parseInt(Math.max(window.innerHeight - this.dragAreaLayoutContainer.getBoundingClientRect().top - 50, 400));
            let viewWidth = parseInt(Math.max(window.innerWidth - this.dragAreaLayoutContainer.getBoundingClientRect().left - 10, 320));
            this.updateSVGDimensions(viewHeight, viewWidth);
        }

        updateSVGDimensions(viewHeight, viewWidth) {
            this.setState({ viewHeight: viewHeight, viewWidth: viewWidth, vbox: Object.assign({}, this.state.vbox , {w: viewWidth, h: viewHeight}) });
        }

        dragSvg(e) {
            console.log(e);
        }

        render() {
            return(
                <div ref={(input) => {this.dragAreaLayoutContainer = input}}>
                            <svg version="1.1" width={this.state.viewWidth} height={this.state.viewHeight} viewBox={Object.values(this.state.vbox).join(" ")} draggable="false" onDragStart={this.ondragdstart} onMouseDown={this.onmousedown} onDrag={this.dragSvg}>
                                <defs>
                                    <pattern x="0" y="0" width="40" height="40" viewBox="0 0 40 40" patternUnits="userSpaceOnUse">
                                        <rect x="0" y="0" width="40" height="40" fill="#dbeef0" stroke="#9bcfd2" strokeWidth="0.4">
                                        </rect>
                                    </pattern>
                                    <pattern x="0" y="0" width="200" height="200" viewBox="0 0 200 200" patternUnits="userSpaceOnUse">
                                        <rect x="0" y="0" width="200" height="200" fill="url(#smallrect)" stroke="#9bcfd2" strokeWidth="1">
                                        </rect>
                                    </pattern>
                                </defs>
                                <rect x="0" y="0" width={this.state.dragAreaWidth} height={this.state.dragAreaHeight} fill="url(#bigrect)" id="bg" draggable="false" onDragStart={this.ondragdtart} onMouseDown={this.onmousedown}></rect>
                                <g></g>
                            </svg>
                </div>
            );
        }
    }

我必须将此 svg 移动到 div 容器中，并更新 vBox 值。我尝试过 onDrag、onMouseMove 和其他一些事件监听器，但它们都没有工作。我还必须向这个 svg 添加拖放功能。这样用户就可以将各种图像拖放到 svg 中。用户还可以将拖放图像从 svg 的一部分移动到 svg 的另一部分。我怎么能在反应中做到这一点。

Answer 1

SVG 不支持拖动事件，因此您需要使用onMouseDown 和onMouseUp 事件，并在状态中跟踪isDragging。

<circle
  onMouseDown={handleDragStart}
  onMouseUp={handleDragEnd}
/>

简单示例：https://codepen.io/techniq/pen/yVEeOx?editors=0010

阅读更多：http://www.petercollingridge.co.uk/tutorials/svg/interactive/dragging/

啊，上一个问题：Html5 drag and drop on svg element