office-ui-fabric-react/lib/utilities/DraggableZone/DraggableZone.types.d.ts

Reusable React components for building experiences for Microsoft 365.

import * as React from 'react';
export interface IDragData {
    position: ICoordinates;
    lastPosition?: ICoordinates;
    delta: ICoordinates;
}
export interface ICoordinates {
    x: number;
    y: number;
}
export interface IDraggableZoneProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Specifies a selector to be used as the handle that initiates drag
     */
    handleSelector?: string;
    /**
     * Specifies a selector to be used to prevent drag initialization.
     * For example, if you do not want buttons inside of your handleSelector
     * to have the cursor change to move or to allow users to select from buttons,
     * you could pass button here (the close button in the header of a dialog is a concrete example)
     */
    preventDragSelector?: string;
    /**
     * the X and Y coordinates to use as an offest to position the draggable content
     */
    position?: ICoordinates;
    /**
     * Callback for when dragging starts
     */
    onStart?: (event: React.MouseEvent<HTMLElement> & React.TouchEvent<HTMLElement>, dragData: IDragData) => void;
    /**
     * Callback for when the drag changes, while dragging
     */
    onDragChange?: (event: React.MouseEvent<HTMLElement> & React.TouchEvent<HTMLElement>, dragData: IDragData) => void;
    /**
     * Callback for when dragging stops
     */
    onStop?: (event: React.MouseEvent<HTMLElement> & React.TouchEvent<HTMLElement>, dragData: IDragData) => void;
}