How to use react-dnd-touch-backend - 10 common examples

const delta = monitor.getDifferenceFromInitialOffset()

      component.handleDrop(item, delta)
    },
    canDrop: () => true
  },
(connect, monitor) => {
  /* eslint arrow-body-style: ["off"] */
  return {
    connectDropTarget: connect.dropTarget(),
    itemType: monitor.getItemType(),
  }
})(Canvas)

export const SetupCanvas = DragDropContext(TouchBackend({
  enableMouseEvents: true
}))(CanvasDropTarget)

import faSolid                            from '@fortawesome/fontawesome-free-solid';
import RouterConfig                       from '~/routing/RouterConfig';

/* FONTAWESOME SETUP */
const faModules = [faBrands, faRegular, faSolid];
fontawesome.library.add(...faModules);

/* REACT-DND BACKENDS */
const CustomTouchTransition = createTransition('touchstart', (evt) => evt.touches != null);

// Default backend for primary mouse support:
const primaryBackend = { backend: HTML5Backend };

// Touch support-enabled secondary backend:
const secondaryBackend = {
  backend: TouchBackend({ enableMouseEvents: true }),
  preview: true,
  transition: CustomTouchTransition,
};

const html5TouchPipeline = {
  backends: [primaryBackend, secondaryBackend],
};

@DragDropContext(MultiBackend(html5TouchPipeline))
export default class AppContainer extends Component {
  static displayName = 'REACT_TIMELINE_APP_ROOT';

  render = () => (RouterConfig);
}

);
  }
}

// Note:
// Normally, the top level APP component is wrapped with the DragDropContext
// We wrap this component to create a simple/local example.
const WrappedStudyBrowser = DragDropContext(
  TouchBackend({ enableMouseEvents: true }),
  null,
  true
)(StudyBrowserContainer);

// http://react-dnd.github.io/react-dnd/docs/api/drag-drop-context
export { WrappedStudyBrowser };

        backend: (manager, context) => TouchBackend(manager, context, {
            enableMouseEvents: false,
            ignoreContextMenu: true,
            delayTouchStart: 200, // milliseconds
        } as TouchBackendOptions),
        // backend: TouchBackend,

import * as ReactDnd from "react-dnd";
import TouchBackend from "react-dnd-touch-backend";

const component = () => null;

const dndComponent = ReactDnd.DragDropContext(TouchBackend)(component);
const dndComponentMouseEvents = ReactDnd.DragDropContext(TouchBackend({enableMouseEvents: true}))(component);
const dndComponentDelayTouchStart = ReactDnd.DragDropContext(TouchBackend({delayTouchStart: 200}))(component);
const dndComponentDelayMouseStart = ReactDnd.DragDropContext(TouchBackend({enableMouseEvents: true, delayMouseStart: 100}));
const dndComponentKeyboardEvents = ReactDnd.DragDropContext(TouchBackend({enableKeyboardEvents: true}));
const dndComponentOldDelay = ReactDnd.DragDropContext(TouchBackend({delay: 300}));
const dndComponentAllCurrentEvents = ReactDnd.DragDropContext(TouchBackend(
    {enableKeyboardEvents: true, enableMouseEvents: true, delayMouseStart: 100, delayTouchStart: 200}));
const dndComponentWithScrollAngleRanges = ReactDnd.DragDropContext(TouchBackend(
    { scrollAngleRanges: [{ start: 0, end: 0 }, { start: 0 }, { end: 0 }] }));
const dndComponentWithTouchSlop = ReactDnd.DragDropContext(TouchBackend({ touchSlop: 0 }));
const dndComponentWithIgnoreContextMenu = ReactDnd.DragDropContext(TouchBackend({ ignoreContextMenu: true }));

return event;
    },
    release: version.build
};

Sentry.init(sentryOptions);

const store = configureStore();

store.dispatch(navigate(window.location.pathname, window.location.search, true));

window.onpopstate = function(e) {
    store.dispatch(navigate(e.target.location.pathname, null, true));
};

const DnDContainer = DragDropContext(TouchBackend({ enableMouseEvents: true }))(Application);

render(
    
        <div>
            
            
                
            
        </div>
    , document.getElementById('component'));

* Renders the component
   */
  render() {
    return (
      <div>
        { this.props.children }
        { this.props.customDragLayer }
      </div>
    );
  }
}

export default DragDropContext(TouchBackend({ enableMouseEvents: true }))(DraggableContext);

}
}

const DecoratedNametag = Radium(DragDropContext(TouchBackend({ enableMouseEvents: true }))(Nametag))

ReactDOM.render(, mountNode)

treeNodeWithChildrenComponent,
    treeNodeContentComponent,
    ...props
}) {
    const classes = useStyles({ classes: classesOverride });
    useEffect(() => {
        const childrenCount = Children.count(children);

        if (childrenCount > 1 && process.env.NODE_ENV !== 'production') {
            warnAboutChildren();
        }
    }, [children]);

    const Container = enableDragAndDrop
        ? DragDropContext(
              TouchBackend({
                  enableKeyboardEvents: true,
                  enableMouseEvents: true,
                  enableTouchEvents: true,
              })
          )('div')
        : Fragment;

    const TreeNode = enableDragAndDrop
        ? droppable(treeNodeComponent)
        : treeNodeComponent;

    const TreeNodeContent = enableDragAndDrop
        ? draggable(treeNodeContentComponent)
        : treeNodeContentComponent;

    return (

}}
                            index={i}
                            id={item.id}
                            text={item.text}
                            secondary={item.secondary}
                            action={item.action}
                            moveListItem={this.moveListItem}
                        />
                    ))}
                
            
        );
    }
}

export default DragDropContext(TouchBackend({
    enableMouseEvents: true, delayTouchStart: 100
}))(ReorderList);