DragOverlay - Svelte

Overview

The DragOverlay component renders a custom overlay element while a drag operation is in progress. This allows you to display a completely different element than the one being dragged, which is useful for rendering a styled clone, a preview, or a simplified representation of the dragged element.

Usage

Import and place the DragOverlay component inside a DragDropProvider. Its children will only be rendered when a drag operation is active.

<script>
  import {DragDropProvider, DragOverlay, createDraggable} from '@dnd-kit/svelte';

  const draggable = createDraggable({id: 'my-item'});
</script>

<DragDropProvider>
  <button {@attach draggable.attach}>draggable</button>
  <DragOverlay>
    {#snippet children(source)}
      <div>I will be rendered while dragging...</div>
    {/snippet}
  </DragOverlay>
</DragDropProvider>

You should only render the DragOverlay component once per DragDropProvider.

Rendering based on the drag source

You can use the children snippet parameter to access the current drag source and render different content depending on which element is being dragged:

<script>
  import {DragDropProvider, DragOverlay} from '@dnd-kit/svelte';
</script>

<DragDropProvider>
  <!-- draggable elements -->
  <DragOverlay>
    {#snippet children(source)}
      <div>Dragging {source.id}</div>
    {/snippet}
  </DragOverlay>
</DragDropProvider>

Customizing the drop animation

By default, when a drag operation ends, the overlay animates back to the position of the source element. You can customize or disable this animation using the dropAnimation prop.

<!-- Disable the drop animation -->
<DragOverlay dropAnimation={null}>
  {#snippet children(source)}
    <div>No animation on drop</div>
  {/snippet}
</DragOverlay>

<!-- Customize the animation timing -->
<DragOverlay dropAnimation={{ duration: 150, easing: 'ease-out' }}>
  {#snippet children(source)}
    <div>Fast drop animation</div>
  {/snippet}
</DragOverlay>

Props

disabled

boolean

default: false

Whether the drag overlay is disabled. When true, the overlay will not render its children during drag operations.

dropAnimation

DropAnimation | null

Customize or disable the drop animation that plays when a drag operation ends.

undefined – use the default animation (250ms ease)
null – disable the drop animation entirely
{duration, easing} – customize the animation timing
(context) => Promise<void> | void – provide a fully custom animation function

Snippets

children

Snippet<[Draggable]>

The content to render as the drag overlay. Only rendered when a drag operation is in progress.

Snippet parameters:

source – the Draggable instance that is the source of the current drag operation.