3

on the dnd-multi-backend library, there are instructions with such text:

Since native Drag-n-Drop is not currently supported in touch devices. A custom DragPreview is required. Check out the example for a sample implementation.

But a link to example doesn't work. Does anyone has got an example of how to add a 'ghost' preview when dragging an element on touch devices?

P.S. On laptops Preview works. Preview option in HTML5toTouch is set to true.

1) When using dnd-multi-backend dnd on laptops and touch devices works but no preview on touch devices :

import MultiBackend, { TouchTransition } from 'react-dnd-multi-backend';
import TouchBackend from 'react-dnd-touch-backend';
import HTML5Backend from 'react-dnd-html5-backend';

    const HTML5toTouch = {
  backends: [
    {
      backend: HTML5Backend,
    },
    {
      backend: TouchBackend({
        enableMouseEvents: true,
        enableTouchEvents: true,
        touchSlop: 20,
      }), // Note that you can call your backends with options
      preview: true,
      transition: TouchTransition,
    },
  ],
};

export default DragDropContext(MultiBackend(HTML5toTouch))(MyPage);

2) When using [TouchBackend]+[HTML5Backend]+[Modernizr] : With such code drag and drop on touch devices don't work:

export default DragDropContext(
  Modernizr.touchevents ? TouchBackend : HTML5Backend,
)(MyPage);

3) I tried to add Preview but it does not track when dragging:

import MultiBackend, {
  TouchTransition,
  Preview,
} from 'react-dnd-multi-backend';

  const generatePreview = (object) => (
        <div style={{ backgroundColor: 'red' }}>Generated</div>
      );
<Preview generator={generatePreview} />
Julia
  • 674
  • 1
  • 6
  • 18

1 Answers1

2

Be sure to include the style prop in your generated <div>. If you don't, your preview won't move around the page. It includes style stuff that updates as the item is dragged.

So your code would be updated to:

const generatePreview = (type, item, style) => (
       return <div style={style}>Generated</div>;
  );
<Preview generator={generatePreview} />

I referred to a few files in the repo: preview/examples/App.js and react-dnd-preview/src/index.js

Amy
  • 29
  • 3