How do you move a dragsource with React-DND?

Question

How do you make the source element move with the mouse cursor using react-dnd?

This is what I am doing (simplified example):

import React from 'react';
import ReactDom from 'react-dom';
import {DragDropContext, DragSource} from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

@DragSource("zzzz", {beginDrag: props => ({})}, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging()
}))
export class DND extends React.Component {
  render () {
    const text = this.props.isDragging ? "YAY": "DND";

    return this.props.connectDragSource(
      <div>{text}</div>
    );
  }
}

@DragDropContext(HTML5Backend)
export class Application extends React.Component {
  render() {
    return <div><DND /></div>;
  }
}

ReactDom.render(
  <Application />,
  document.getElementById('react-mount')
);

The text changes from DND to YAY when I click and drag it, but the div does not move to follow the mouse.

The examples I have gone through do not appear to be manually updating the targets x/y coordinates, and I assume this is managed by the library itself. What am I missing?

Edit:

I failed to mention this happens while emulating mobile devices in Chrome devtools. It works as expected in desktop mode.

I'm currently looking into moving the dragsource using DragLayer as seen here;

Answer 1

The mobile browser not show the shadow of drag source when dragging. You need use DragPreview to draw the moving.