Drag tracking

[shahankit]

I'm implementing a simple match the following options kind of UI.

I wrapped the the list component in DragDropContext using HTML5Backend. I defined the left side circles as DragSource and right side circles as DropTarget. For the DragSource nodes I defined collect function to return isDragging and getClientOffset from monitor:

function collect(connect, monitor) {
  return {
    ...
    isDragging: monitor.isDragging(),
    clientOffset: monitor.getClientOffset(),
  };
}

The render function of my DragSource node is not called when I start dragging. I want to draw a line between the dragSource and the current drag mouse position and hence need to track the current drag position. I'm new to react-dnd, any help on how to implement this would be great.

[ldc4]

+1 how to track the dragging state

[ly-tc]

There're two options:

1. Use DragLayer
2. Use requestAnimationFrame
   The option 2 is much better because of the performance. Something like this:

function collect(connect, monitor) {
  return {
    ...
    isDragging: monitor.isDragging(),
    monitor,
  };
}
class MyDragSource extends Component {
  componentWillReceiveProps(nextProps) {
    const { isDragging } = nextProps;
    if (isDragging !== this.props.isDragging) {
      if (isDragging) {
        this.requestAnimationFrameId = window.requestAnimationFrame(this.onDragging);
     } else {
       window.cancelAnimationFrame(this.requestAnimationFrameId);
     }
    }
  }

  onDragging = () => {
    const { monitor } = this.props;
    const clientOffset = monitor. getClientOffset();
    ...
    this.requestAnimationFrameId = window.requestAnimationFrame(this.onDragging);
  }
}