无法在反应中使用 mousemove 移动 div答案

【问题标题】：Not able to move div using mousemove in react无法在反应中使用 mousemove 移动 div
【发布时间】：2018-11-01 10:27:41
【问题描述】：

我试图在 mousemove 事件的帮助下移动一个 div。

这是相同的代码。 https://codepen.io/anurag92/pen/VEoQOZ

class ImageMarker extends React.Component {

    constructor(props) {
        super(props);

        this.mouseDown = this.mouseDown.bind(this);
        this.mouseUp = this.mouseUp.bind(this);
        this.mouseMove = this.mouseMove.bind(this);
        this.paint = this.paint.bind(this);
    }

    mouseDown(e) {
        const position = {
            left: this.marker.offsetLeft,
            top: this.marker.offsetTop
        };

        this.hitOffset = {
            x: e.pageX - position.left,
            y: e.pageY - position.top,
            diameter: this.diameter(),
            markerRadius: 10
        };
        this.marker.addEventListener('mousemove', this.mouseMove);
        this.marker.addEventListener('mouseup', this.mouseUp);
        this.marker.addEventListener('mouseleave', this.mouseUp);
        e.preventDefault();
    }

    mouseMove(e) {
        this.position = {
            x: e.pageX - this.hitOffset.x,
            y: e.pageY - this.hitOffset.y
        };
        this.position.x = Math.round(this.position.x);
        this.position.y = Math.round(this.position.y);

        this.position.x = Math.min(700 - 1, Math.max(0, this.position.x));
        this.position.y = Math.min(700 - 1, Math.max(0, this.position.y));

        this.paint();
    }

    mouseUp(e) {
        this.marker.removeEventListener('mousemove', this.mouseMove);
        this.marker.removeEventListener('mouseup', this.mouseUp);
        this.marker.removeEventListener('mouseleave', this.mouseUp);
    }

    diameter() {
        return 1;
    }

    paint() {
        if (JSON.stringify(this.paintedPosition) !== JSON.stringify(this.position)) {
            this.paintedPosition = Object.assign({}, this.position);
        }

        if (this.position) {
            this.marker.style.left = `${100 * this.position.x / 700}%`;
            this.marker.style.top = `${100 * this.position.y / 700}%`;
        }
        return this;
    }

    render() {
        this.position = this.position || {
            x: 5,
            y: 5
        };
        this.offset = 0;
        return <div className='outer'
            ref = {ref => {
                this.canvasRef = ref;
            }}
        >
            <div className = 'marker'
                onMouseDown = {event => this.mouseDown(event)}
                ref = {ref => {
                    this.marker = ref;
                }} >
            </div>
        </div>;
    }

}

// export default ImageMarker;



ReactDOM.render(<ImageMarker />,
document.getElementById('root')
);

当我缓慢移动光标时，它工作正常，但在快速移动时会触发 mouseleave，因此 div 无法跟上光标。

谁能告诉我一个可能的解决方法。

【问题讨论】：

标签： javascript reactjs dom mousemove mouseleave

【解决方案1】：

您可以通过将mouseMove（和mouseUp）附加到整个document 来解决这个问题，这样无论鼠标是否离开您要拖动的元素，它们都会被触发。请记住在componentWillUnmount 期间分离事件以避免泄漏。

如果您希望网站在移动设备上运行，您还需要附加触摸、指针或拖动事件。请参阅 code of the kendo-draggable 抽象以获取参考。我们在我们的反应组件中使用它。绑定到ComponentDidMount 上的元素并在ComponentWillUnmount 上分离

【讨论】：