• Version 16.0.1
  • Published
  • 106 kB
  • 2 dependencies
  • MIT license


npm i react-dnd-touch-backend
yarn add react-dnd-touch-backend
pnpm add react-dnd-touch-backend


Touch backend for react-dnd



variable TouchBackend

const TouchBackend: BackendFactory;


    class TouchBackendImpl

    class TouchBackendImpl implements Backend {}


      manager: DragDropManager,
      context: TouchBackendContext,
      options: Partial<TouchBackendOptions>

        property document

        readonly document: Document;

          property handleCancelOnEscape

          handleCancelOnEscape: (e: KeyboardEvent) => void;

            property handleMove

            handleMove: (_evt: MouseEvent | TouchEvent, targetId: string) => void;

              property handleMoveStart

              handleMoveStart: (sourceId: string) => void;

                property handleTopMove

                handleTopMove: (e: TouchEvent | MouseEvent) => void;

                  property handleTopMoveCapture

                  handleTopMoveCapture: () => void;

                    property handleTopMoveEndCapture

                    handleTopMoveEndCapture: (e: Event) => void;

                      property handleTopMoveStart

                      handleTopMoveStart: (e: MouseEvent | TouchEvent) => void;

                        property handleTopMoveStartCapture

                        handleTopMoveStartCapture: (e: Event) => void;

                          property handleTopMoveStartDelay

                          handleTopMoveStartDelay: (e: Event) => void;

                            property sourceNodes

                            sourceNodes: Map<Identifier, HTMLElement>;

                              property sourcePreviewNodeOptions

                              sourcePreviewNodeOptions: Map<string, any>;

                                property sourcePreviewNodes

                                sourcePreviewNodes: Map<string, HTMLElement>;

                                  property targetNodes

                                  targetNodes: Map<string, HTMLElement>;

                                    method connectDragPreview

                                    connectDragPreview: (
                                    sourceId: string,
                                    node: HTMLElement,
                                    options: unknown
                                    ) => Unsubscribe;

                                      method connectDragSource

                                      connectDragSource: (sourceId: string, node: HTMLElement) => Unsubscribe;

                                        method connectDropTarget

                                        connectDropTarget: (targetId: string, node: HTMLElement) => Unsubscribe;

                                          method profile

                                          profile: () => Record<string, number>;
                                          • Generate profiling statistics for the HTML5Backend.

                                          method setup

                                          setup: () => void;

                                            method teardown

                                            teardown: () => void;


                                              interface AngleRange

                                              interface AngleRange {}

                                                property end

                                                end: number;

                                                  property start

                                                  start: number;

                                                    interface EventName

                                                    interface EventName {}

                                                      property contextmenu

                                                      contextmenu?: 'contextmenu';

                                                        property end

                                                        end?: 'mouseup' | 'touchend';

                                                          property keydown

                                                          keydown?: 'keydown';

                                                            property move

                                                            move?: 'mousemove' | 'touchmove';

                                                              property start

                                                              start?: 'mousedown' | 'touchstart';

                                                                interface TouchBackendContext

                                                                interface TouchBackendContext {}

                                                                  property document

                                                                  document?: Document;

                                                                    property window

                                                                    window?: Window;

                                                                      interface TouchBackendOptions

                                                                      interface TouchBackendOptions {}

                                                                        property delay

                                                                        delay: number;

                                                                          property delayMouseStart

                                                                          delayMouseStart: number;

                                                                            property delayTouchStart

                                                                            delayTouchStart: number;

                                                                              property enableHoverOutsideTarget

                                                                              enableHoverOutsideTarget: boolean;

                                                                                property enableKeyboardEvents

                                                                                enableKeyboardEvents: boolean;

                                                                                  property enableMouseEvents

                                                                                  enableMouseEvents: boolean;

                                                                                    property enableTouchEvents

                                                                                    enableTouchEvents: boolean;

                                                                                      property getDropTargetElementsAtPoint

                                                                                      | undefined
                                                                                      | ((x: number, y: number, dropTargets: HTMLElement[]) => HTMLElement[]);

                                                                                        property ignoreContextMenu

                                                                                        ignoreContextMenu: boolean;

                                                                                          property rootElement

                                                                                          rootElement: Node | undefined;

                                                                                            property scrollAngleRanges

                                                                                            scrollAngleRanges?: AngleRange[] | undefined;

                                                                                              property touchSlop

                                                                                              touchSlop: number;


                                                                                                enum ListenerType

                                                                                                enum ListenerType {
                                                                                                mouse = 'mouse',
                                                                                                touch = 'touch',
                                                                                                keyboard = 'keyboard',

                                                                                                  member keyboard

                                                                                                  keyboard = 'keyboard'

                                                                                                    member mouse

                                                                                                    mouse = 'mouse'

                                                                                                      member touch

                                                                                                      touch = 'touch'

                                                                                                        Package Files (3)

                                                                                                        Dependencies (2)

                                                                                                        Dev Dependencies (6)

                                                                                                        Peer Dependencies (0)

                                                                                                        No peer dependencies.


                                                                                                        To add a badge like this badgeto your package's README, use the codes available below.

                                                                                                        You may also use to create a custom badge linking to

                                                                                                        • Markdown
                                                                                                        • HTML
                                                                                                          <a href=""><img src="" alt=""></a>