Skip to main content

setStudioDragData()v4.0.502

Writes an Element payload and its preview metadata to a browser DataTransfer object.

DraggableElement.tsx
import {
  createElementPayload,
  setStudioDragData,
} from '@remotion/studio-protocol';

const payload = createElementPayload({
  displayName: 'Lower Third',
  slug: 'lower-third',
  sourceCode: 'export const LowerThird = () => null;',
  dependencies: [],
  dimensions: {width: 900, height: 260},
  durationInFrames: 90,
});

export const DraggableElement = () => (
  <button
    draggable
    onDragStart={(event) => {
      setStudioDragData({
        dataTransfer: event.dataTransfer,
        payload,
      });
    }}
  >
    Drag into Studio
  </button>
);

Arguments​

Pass an object with the following properties.

dataTransfer​

The DataTransfer from a browser dragstart event. effectAllowed is set to copy.

payload​

The value returned by createElementPayload().

Drag preview​

The protocol MIME type contains dimensions and duration metadata so Studio can show a preview before reading the payload.

setStudioDragData() does not call setDragImage(). The website owns the visual drag image.

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​