高亮显示组件中的可拖动点监视更改

function throttle(func, limit) {
  let inThrottle;
  return function() {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

class DraggablePoint extends React.Component {
  constructor(props) {
    super(props);
    this.state = { x: 0, y: 0 };
    this.handleMouseDown = this.handleMouseDown.bind(this);
    this.handleMouseMove = throttle(this.handleMouseMove.bind(this), 16);
    this.handleMouseUp = this.handleMouseUp.bind(this);
  }

  handleMouseDown(event) {
    // 记录初始位置
    this.startX = event.clientX;
    this.startY = event.clientY;
    window.addEventListener('mousemove', this.handleMouseMove);
    window.addEventListener('mouseup', this.handleMouseUp);
  }

  handleMouseMove(event) {
    const dx = event.clientX - this.startX;
    const dy = event.clientY - this.startY;
    this.setState({ x: this.state.x + dx, y: this.state.y + dy });
    this.startX = event.clientX;
    this.startY = event.clientY;
  }

  handleMouseUp() {
    window.removeEventListener('mousemove', this.handleMouseMove);
    window.removeEventListener('mouseup', this.handleMouseUp);
  }

  render() {
    return (
      <div
        style={{ left: this.state.x, top: this.state.y }}
        onMouseDown={this.handleMouseDown}
      >
        Drag me!
      </div>
    );
  }
}

const rect = element.getBoundingClientRect();
const x = rect.left + window.scrollX;
const y = rect.top + window.scrollY;