react-dnd

property dragDropManager

dragDropManager: DragDropManager | undefined;

method getClientOffset

getClientOffset: () => XYCoord | null;

• Returns the last recorded { x, y } client offset of the pointer while a drag operation is in progress. Returns null if no item is being dragged.

method getDifferenceFromInitialOffset

getDifferenceFromInitialOffset: () => XYCoord | null;

• Returns the { x, y } difference between the last recorded client offset of the pointer and the client offset when current the drag operation has started. Returns null if no item is being dragged.

method getInitialClientOffset

getInitialClientOffset: () => XYCoord | null;

• Returns the { x, y } client offset of the pointer at the time when the current drag operation has started. Returns null if no item is being dragged.

method getInitialSourceClientOffset

getInitialSourceClientOffset: () => XYCoord | null;

• Returns the { x, y } client offset of the drag source component's root DOM node at the time when the current drag operation has started. Returns null if no item is being dragged.

method getItem

getItem: <T = DragObject>() => T;

• Returns a plain object representing the currently dragged item. Every drag source must specify it by returning an object from its beginDrag() method. Returns null if no item is being dragged.

method getItemType

getItemType: () => Identifier | null;

• Returns a string or a symbol identifying the type of the current dragged item. Returns null if no item is being dragged.

method getSourceClientOffset

getSourceClientOffset: () => XYCoord | null;

• Returns the projected { x, y } client offset of the drag source component's root DOM node, based on its position at the time when the current drag operation has started, and the movement difference. Returns null if no item is being dragged.

method isDragging

isDragging: () => boolean;

• Returns true if a drag operation is in progress. Returns false otherwise.

property connect

connect: ConnectDragPreview;

property src

src: string;

property anchorX

anchorX?: number;

• Optional. A number between 0 and 1. By default, 0.5. Specifies how the offset relative to the drag source node is translated into the horizontal offset of the drag preview when their sizes don't match. 0 means “dock the preview to the left”, 0.5 means “interpolate linearly” and 1 means “dock the preview to the right”.

property anchorY

anchorY?: number;

• Optional. A number between 0 and 1. By default, 0.5. Specifies how the offset relative to the drag source node is translated into the vertical offset of the drag preview when their sizes don't match. 0 means “dock the preview to the top, 0.5 means “interpolate linearly” and 1 means “dock the preview to the bottom.

property captureDraggingState

captureDraggingState?: boolean;

• Optional. A boolean. By default, false. If true, the component will learn that it is being dragged immediately as the drag starts instead of the next tick. This means that the screenshotting would occur with monitor.isDragging() already being true, and if you apply any styling like a decreased opacity to the dragged element, this styling will also be reflected on the screenshot. This is rarely desirable, so false is a sensible default. However, you might want to set it to true in rare cases, such as if you want to make the custom drag layers work in IE and you need to hide the original element without resorting to an empty drag preview which IE doesn't support.

property offsetX

offsetX?: number;

• Optional. A number or null if not needed. By default, null. Specifies the vertical offset between the cursor and the drag preview element. If offsetX has a value, anchorX won't be used.

property offsetY

offsetY?: number;

• Optional. A number or null if not needed. By default, null. Specifies the vertical offset between the cursor and the drag preview element. If offsetY has a value, anchorY won't be used.

property canDrag

canDrag?:
    | boolean
    | ((monitor: DragSourceMonitor<DragObject, DropResult>) => boolean);

• Optional. Use it to specify whether the dragging is currently allowed. If you want to always allow it, just omit this method. Specifying it is handy if you'd like to disable dragging based on some predicate over props. Note: You may not call monitor.canDrag() inside this method.

property collect

collect?: (monitor: DragSourceMonitor<DragObject, DropResult>) => CollectedProps;

• A function to collect rendering properties

property end

end?: (
    draggedItem: DragObject,
    monitor: DragSourceMonitor<DragObject, DropResult>
) => void;

• Optional. When the dragging stops, endDrag is called. For every beginDrag call, a corresponding endDrag call is guaranteed. You may call monitor.didDrop() to check whether or not the drop was handled by a compatible drop target. If it was handled, and the drop target specified a drop result by returning a plain object from its drop() method, it will be available as monitor.getDropResult(). This method is a good place to fire a Flux action. Note: If the component is unmounted while dragging, component parameter is set to be null.

property isDragging

isDragging?: (monitor: DragSourceMonitor<DragObject, DropResult>) => boolean;

• Optional. By default, only the drag source that initiated the drag operation is considered to be dragging. You can override this behavior by defining a custom isDragging method. It might return something like props.id === monitor.getItem().id. Do this if the original component may be unmounted during the dragging and later “resurrected” with a different parent. For example, when moving a card across the lists in a Kanban board, you want it to retain the dragged appearance—even though technically, the component gets unmounted and a different one gets mounted every time you move it to another list.

  Note: You may not call monitor.isDragging() inside this method.

property item

item?: DragObject | DragObjectFactory<DragObject>;

• This property generates or defines a plain javascript item describing the data being dragged. This is the only information available to the drop targets about the drag source so it's important to pick the minimal data they need to know.

  You may be tempted to put a reference to the component or complex object here, but you should try very hard to avoid doing this because it couples the drag sources and drop targets. It's a good idea to use something like { id: props.id }

  If a function-form is used, it is invoked when the drag begins and returns a draggable item. If the function returns null, the drag is canceled

property options

options?: DragSourceOptions;

• The drag source options

property previewOptions

previewOptions?: DragPreviewOptions;

• DragPreview options

property type

type: SourceType;

• The type of item being dragged. This is required when using the function form of spec.item. If spec.item is a static object, the type may either be defined on that object as item.type, or it may be defined here.

method canDrag

canDrag: () => boolean;

• Returns true if no drag operation is in progress, and the owner's canDrag() returns true or is not defined.

method didDrop

didDrop: () => boolean;

• Returns true if some drop target has handled the drop event, false otherwise. Even if a target did not return a drop result, didDrop() returns true. Use it inside endDrag() to test whether any drop target has handled the drop. Returns false if called outside endDrag().

method getClientOffset

getClientOffset: () => XYCoord | null;

• Returns the last recorded { x, y } client offset of the pointer while a drag operation is in progress. Returns null if no item is being dragged.

method getDifferenceFromInitialOffset

getDifferenceFromInitialOffset: () => XYCoord | null;

• Returns the { x, y } difference between the last recorded client offset of the pointer and the client offset when the current drag operation has started. Returns null if no item is being dragged.

method getDropResult

getDropResult: <T = DropResult>() => T | null;

• Returns a plain object representing the last recorded drop result. The drop targets may optionally specify it by returning an object from their drop() methods. When a chain of drop() is dispatched for the nested targets, bottom up, any parent that explicitly returns its own result from drop() overrides the child drop result previously set by the child. Returns null if called outside endDrag().

method getInitialClientOffset

getInitialClientOffset: () => XYCoord | null;

• Returns the { x, y } client offset of the pointer at the time when the current drag operation has started. Returns null if no item is being dragged.

method getInitialSourceClientOffset

getInitialSourceClientOffset: () => XYCoord | null;

• Returns the { x, y } client offset of the drag source component's root DOM node at the time when the current drag operation has started. Returns null if no item is being dragged.

method getItem

getItem: <T = DragObject>() => T;

• Returns a plain object representing the currently dragged item. Every drag source must specify it by returning an object from its beginDrag() method. Returns null if no item is being dragged.

method getItemType

getItemType: () => Identifier | null;

• Returns a string or a symbol identifying the type of the current dragged item. Returns null if no item is being dragged.

method getSourceClientOffset

getSourceClientOffset: () => XYCoord | null;

• Returns the projected { x, y } client offset of the drag source component's root DOM node, based on its position at the time when the current drag operation has started, and the movement difference. Returns null if no item is being dragged.

method getTargetIds

getTargetIds: () => Identifier[];

• Returns the ids of the potential drop targets.

method isDragging

isDragging: () => boolean;

• Returns true if a drag operation is in progress, and either the owner initiated the drag, or its isDragging() is defined and returns true.

property dropEffect

dropEffect?: string;

• Optional. A string. By default, 'move'. In the browsers that support this feature, specifying 'copy' shows a special “copying” cursor, while 'move' corresponds to the “move” cursor. You might want to use this option to provide a hint to the user about whether an action is destructive.

property accept

accept: TargetType;

• The kinds of dragItems this dropTarget accepts

property canDrop

canDrop?: (
    item: DragObject,
    monitor: DropTargetMonitor<DragObject, DropResult>
) => boolean;

• Optional. Use it to specify whether the drop target is able to accept the item. If you want to always allow it, just omit this method. Specifying it is handy if you'd like to disable dropping based on some predicate over props or monitor.getItem(). Note: You may not call monitor.canDrop() inside this method.

property collect

collect?: (monitor: DropTargetMonitor<DragObject, DropResult>) => CollectedProps;

• A function to collect rendering properties

property drop

drop?: (
    item: DragObject,
    monitor: DropTargetMonitor<DragObject, DropResult>
) => DropResult | undefined;

• Optional. Called when a compatible item is dropped on the target. You may either return undefined, or a plain object. If you return an object, it is going to become the drop result and will be available to the drag source in its endDrag method as monitor.getDropResult(). This is useful in case you want to perform different actions depending on which target received the drop. If you have nested drop targets, you can test whether a nested target has already handled drop by checking monitor.didDrop() and monitor.getDropResult(). Both this method and the source's endDrag method are good places to fire Flux actions. This method will not be called if canDrop() is defined and returns false.

property hover

hover?: (
    item: DragObject,
    monitor: DropTargetMonitor<DragObject, DropResult>
) => void;

• Optional. Called when an item is hovered over the component. You can check monitor.isOver({ shallow: true }) to test whether the hover happens over just the current target, or over a nested one. Unlike drop(), this method will be called even if canDrop() is defined and returns false. You can check monitor.canDrop() to test whether this is the case.

property options

options?: DropTargetOptions;

• The drop target options

method canDrop

canDrop: () => boolean;

• Returns true if there is a drag operation in progress, and the owner's canDrop() returns true or is not defined.

method didDrop

didDrop: () => boolean;

• Returns true if some drop target has handled the drop event, false otherwise. Even if a target did not return a drop result, didDrop() returns true. Use it inside drop() to test whether any nested drop target has already handled the drop. Returns false if called outside drop().

method getClientOffset

getClientOffset: () => XYCoord | null;

• Returns the last recorded { x, y } client offset of the pointer while a drag operation is in progress. Returns null if no item is being dragged.

method getDifferenceFromInitialOffset

getDifferenceFromInitialOffset: () => XYCoord | null;

• Returns the { x, y } difference between the last recorded client offset of the pointer and the client offset when current the drag operation has started. Returns null if no item is being dragged.

method getDropResult

getDropResult: <T = DropResult>() => T | null;

• Returns a plain object representing the last recorded drop result. The drop targets may optionally specify it by returning an object from their drop() methods. When a chain of drop() is dispatched for the nested targets, bottom up, any parent that explicitly returns its own result from drop() overrides the drop result previously set by the child. Returns null if called outside drop().

method getInitialClientOffset

getInitialClientOffset: () => XYCoord | null;

• Returns the { x, y } client offset of the pointer at the time when the current drag operation has started. Returns null if no item is being dragged.

method getInitialSourceClientOffset

getInitialSourceClientOffset: () => XYCoord | null;

• Returns the { x, y } client offset of the drag source component's root DOM node at the time when the current drag operation has started. Returns null if no item is being dragged.

method getItem

getItem: <T = DragObject>() => T;

• Returns a plain object representing the currently dragged item. Every drag source must specify it by returning an object from its beginDrag() method. Returns null if no item is being dragged.

method getItemType

getItemType: () => Identifier | null;

• Returns a string or a symbol identifying the type of the current dragged item. Returns null if no item is being dragged.

method getSourceClientOffset

getSourceClientOffset: () => XYCoord | null;

• Returns the projected { x, y } client offset of the drag source component's root DOM node, based on its position at the time when the current drag operation has started, and the movement difference. Returns null if no item is being dragged.

method isOver

isOver: (options?: { shallow?: boolean }) => boolean;

• Returns true if there is a drag operation in progress, and the pointer is currently hovering over the owner. You may optionally pass { shallow: true } to strictly check whether only the owner is being hovered, as opposed to a nested target.

property getHandlerId

getHandlerId: () => Identifier | null;

property receiveHandlerId

receiveHandlerId: (handlerId: Identifier | null) => void;

method subscribeToStateChange

subscribeToStateChange: (
    fn: () => void,
    options?: { handlerIds?: Identifier[] }
) => Unsubscribe;

property x

x: number;

property y

y: number;