Add Drag and Drop to Your Svelte App with SvelteDnD

SvelteDnD is a lightweight TypeScript-based drag and drop library for Svelte applications.

Built with Svelte’s new runes system, this library provides web developers with an intuitive solution for implementing interactive drag and drop functionality.

Features

Use Cases

• Task Management Boards: Use SvelteDnD to build interactive Kanban boards. Users can drag tasks between different columns representing stages (e.g., To Do, In Progress, Done) to visually organize their workflow.
• List Reordering: Allow users to reorganize lists by dragging items into a desired order. This applies to anything from rearranging images in a gallery to ordering items in a shopping cart.
• UI Customization: Implement features that let users customize their dashboard or interface by dragging widgets or components to different positions.
• File Management: In a web-based file manager, users can drag files between folders or rearrange file order with SvelteDnD.
• Form Building: Simplify the creation of dynamic forms by dragging form elements into place, adjusting order, or moving items between different sections of a form.

Installation

Use your preferred package manager to install SvelteDnD:

Using npm:

npm i @thisux/sveltednd@latest

Using bun:

bun add @thisux/sveltednd

Using yarn:

yarn add @thisux/sveltednd

Using pnpm:

pnpm add @thisux/sveltednd

Usage

First, import draggable, droppable, and DragDropState from SvelteDnD:

<script lang="ts">
   import { draggable, droppable, type DragDropState } from '@thisux/sveltednd';
   let items = $state(['Item 1', 'Item 2', 'Item 3']);
   function handleDrop(state: DragDropState<{ id: string }>) {
      const { draggedItem, sourceContainer, targetContainer } = state;
      if (!targetContainer || sourceContainer === targetContainer) return;
      items = items.filter((item) => item !== draggedItem);
      items = [...items, draggedItem];
   }
</script>

Create a droppable container and draggable items:

<div use:droppable={{ container: 'list', callbacks: { onDrop: handleDrop } }}>
   {#each items as item}
      <div use:draggable={{ container: 'list', dragData: item }}>
         {item}
      </div>
   {/each}
</div>

You can implement more complex logic based on your application’s needs using onDragStart and onDragEnd callbacks for the draggable action and onDragEnter, onDragLeave, and onDragOver for the droppable action.

Related Resources

• Svelte Official Documentation: Comprehensive guide to Svelte framework and its latest features
• HTML5 Drag and Drop MDN Guide: Foundational web standard for drag and drop interactions

FAQs

Q: Is SvelteDnD compatible with all Svelte versions?
A: SvelteDnD is specifically designed for Svelte 5 and leverages the new runes system. Ensure you’re using a compatible Svelte version.

Q: Can I customize drag and drop styles?
A: Yes, SvelteDnD provides callbacks and attributes to add custom classes and handle visual feedback during drag operations.

Q: How does SvelteDnD handle performance?
A: The library is lightweight and optimized, with built-in state management and automatic cleanup to minimize performance overhead.

Q: Can I drag items between multiple containers?
A: Absolutely. The library supports complex drag and drop scenarios across different containers with comprehensive state tracking.

Q: Is TypeScript support mandatory?
A: While SvelteDnD is built with TypeScript, you can use it in regular JavaScript projects. TypeScript provides enhanced type safety and developer experience.

Preview