BlockSuite API Documentation / @blocksuite/block-std / DraggableOption

Type Alias: DraggableOption<PayloadEntity, PayloadFrom, DropPayload>

DraggableOption<PayloadEntity, PayloadFrom, DropPayload> = Pick<OriginalDraggableOption, "element" | "dragHandle" | "canDrag"> & object & ElementDragEventMap<DragPayload<PayloadEntity, PayloadFrom>, DropPayload>

Defined in: packages/framework/block-std/src/extension/dnd/index.ts:62

Type declaration

setDragData()?

optional setDragData: (args) => PayloadEntity

Set drag data for the draggable element.

Parameters

args

ElementGetFeedbackArgs

Returns

PayloadEntity

See

ElementGetFeedbackArgs for callback arguments

setDragPreview?

optional setDragPreview: false | (options) => void | () => void

Set custom drag preview for the draggable element.

setDragPreview is a function that will be called with a container element and other drag data as parameter when the drag preview is generating. Append the custom element to the container which will be used to generate the preview. Once the drag preview is generated, the container element and its children will be removed automatically.

If you want to completely disable the drag preview, just set setDragPreview to false.

Example

dnd.draggable({
 // ...
 setDragPreview: ({ container }) => {
   const preview = document.createElement('div');
   preview.style.width = '100px';
   preview.style.height = '100px';
   preview.style.backgroundColor = 'red';
   preview.innerText = 'Custom Drag Preview';
   container.appendChild(preview);

   return () => {
     // do some cleanup
   }
 }
})

Param

callback to set custom drag preview

Returns

setExternalDragData()?

optional setExternalDragData: (args) => ReturnType<Required<OriginalDraggableOption>["getInitialDataForExternal"]>

Set external drag data for the draggable element.

Parameters

args

ElementGetFeedbackArgs

Returns

ReturnType<Required<OriginalDraggableOption>["getInitialDataForExternal"]>

See

ElementGetFeedbackArgs for callback arguments

Type Parameters

PayloadEntity

PayloadEntity extends DragEntity

PayloadFrom

PayloadFrom extends DragFrom

DropPayload

DropPayload extends object