Svelte Flow

LearnReferenceExamples
GitHubSupport Us
  • Examples
  • Feature Overview
    • Custom Nodes
    • Updating Nodes
    • Stress Test
    • Drag Handle
    • Add Node On Edge Drop
    • Proximity Connect
    • Node Resizer
    • Easy Connect
    • Connection Limit
    • Intersections
    • Connection Line
    • Custom Edges
    • Edge Label Renderer
    • Edge Markers
    • Edge Types
    • Simple Floating Edges
    • Dagre
    • Elkjs
    • Horizontal Flow
    • Subflows
    • Computing Flows
    • Context Menu
    • Contextual Zoom
    • Drag and Drop
    • Validation
    • Base Style
    • Dark Mode
    • Tailwind
    • Turbo Flow
    • Download Image
    • Threlte Flow
    • useSvelteFlow
ExamplesInteraction
Drag and Drop

Drag and Drop

This example shows how to implement a sidebar with a drag and drop functionality using the native drag and drop events.

<script lang="ts">
const data: string = "world";
</script>

<h1>Hello {data}</h1>

<style>
h1 {
  font-size: 1.5rem;
}
</style>
Read-only
Feature Overview

A project by the xyflow team

We are building and maintaining open source software for node-based UIs since 2019.

Docs

Quickstart GuideAPI ReferenceExamplesShowcaseSupport Us

Social

DiscordGithubX / TwitterBluesky

xyflow

BlogOpen SourceAboutContact
Careers hiring

Legal

MIT LicenseCode of Conduct

info@xyflow.com — Copyright © 2024 webkid GmbH. All rights reserved — website design by Facu Montanaro