Grab cursor while dragging item

[RajaThomas]

have an HTML page which has some draggable elements. Our specs say that hovering mouse on such element the cursor must be grab, and during drag cursor must be grabbing..

So the question is: What am I missing to show grabbing cursor (grabbing) during drag?

import React, { Component } from 'react';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { DndProvider } from 'react-dnd';
import withScrolling from 'react-dnd-scrolling';
import DragItem from './DragItem';
import './App.css';

const ScrollingComponent = withScrolling('div');

const ITEMS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

export default class App extends Component {
  render() {
    return (
      <DndProvider backend={HTML5Backend}>
        <ScrollingComponent className="App">
          {ITEMS.map(n => (
            <DragItem key={n} label={`Item ${n}`} />
          ))}
        </ScrollingComponent>
      </DndProvider>
    );
  }
}

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { DragSource } from 'react-dnd';
import './DragItem.css';

class DragItem extends PureComponent {
  static propTypes = {
    label: PropTypes.string.isRequired
  };

  render() {
    return this.props.dragSource(<div className="DragItem">{this.props.label}</div>);
  }
}

export default DragSource(
  'foo',
  {
    beginDrag() {
      document.body.classList.add('dragging');
      return {};
    }
  },
  connect => ({
    dragSource: connect.dragSource()
  })
)(DragItem);

.dragging {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

while im begin the dragging im manually adding the css class document.body.classList.add('dragging'); for grabbing feature

[samcw]

#325