How do I set up drag and drop in a React app with Fluid DnD?

Install the package via npm, then import the React bindings and wrap your list components. The documentation provides examples for vertical and horizontal lists, and you can customize styling using CSS classes or inline styles as it's fully customizable.

Fluid DnD or Vue Draggable: which should I choose?

Fluid DnD is framework-agnostic and lighter with zero dependencies, while Vue Draggable is Vue-specific and might offer deeper Vue integration. Choose Fluid DnD for cross-framework use or minimal bloat; opt for Vue Draggable if you're solely in the Vue ecosystem and need more Vue-centric features.

Does Fluid DnD work with touchscreens on mobile devices?

Yes, Fluid DnD explicitly supports touch interactions for mobile, tablet, and desktop, as stated in the features list, making it suitable for responsive web applications without additional configuration.

Can I customize the drag animation speed in Fluid DnD?

The README mentions full customization, so you can adjust animations via CSS or configuration. Check the documentation for specific properties to control timing and easing functions, as it draws inspiration from react-beautiful-dnd for smooth effects.

Is Fluid DnD production-ready and reliable?

Yes, it's described as fully tested, typed, and built for production reliability with an MIT license. The GitHub repository shows active maintenance, but consider the smaller community for long-term support.

What frameworks does Fluid DnD support besides Vue?

Fluid DnD supports Vue, React, and Svelte, as listed in the libraries support section, making it versatile for multi-framework teams or projects transitioning between frameworks.

Open-Awesome

vue-fluid-dnd

MITTypeScriptv2.6.3

A lightweight, framework-agnostic drag and drop library for Vue, React, and Svelte lists.

Visit Website GitHub

519 stars17 forks0 contributors

What is vue-fluid-dnd?

Fluid DnD is a lightweight, framework-agnostic drag and drop library for reordering lists in Vue, React, and Svelte applications. It solves the problem of implementing smooth, customizable drag and drop interactions without adding heavy dependencies or framework lock-in.

Target Audience

Frontend developers building interactive lists, dashboards, or admin panels in Vue, React, or Svelte who need a performant, cross-framework drag and drop solution.

Value Proposition

Developers choose Fluid DnD for its zero dependencies, small bundle size (~8 KB gzipped), and seamless support across three major frameworks, offering a balance of flexibility, reliability, and ease of integration.

Overview

A drag and drop🤜🫳library for Vue🌿, React⚛️ and Svelte🚘

Use Cases

Best For

Adding drag and drop to sortable lists in Vue 3 applications
Implementing touch-friendly reordering in React mobile interfaces
Building lightweight, dependency-free interactive dashboards in Svelte
Creating cross-framework component libraries with drag and drop capabilities
Enhancing admin panels with customizable list reordering
Developing prototypes or production apps needing smooth list animations

Not Ideal For

Applications requiring drag and drop for complex, non-list elements like file uploads or nested structures
Projects needing out-of-the-box accessibility features or extensive built-in UI components
Teams relying on a large ecosystem of plugins and community support for rapid development

Pros & Cons

Pros

Minimal Bundle Size

At only ~8 KB gzipped with zero dependencies, it keeps applications fast and lean, as highlighted in the README's bundle size badge and key features.

Cross-Framework Compatibility

Supports Vue, React, and Svelte, allowing developers to use the same library across different projects or frameworks, as stated in the libraries support section.

Fluid Animations

Inspired by react-beautiful-dnd, it delivers smooth, effortless reordering animations that enhance user experience, per the philosophy and features list.

Cross-Platform Input

Explicitly supports both mouse and touch interactions for mobile, tablet, and desktop, making it suitable for responsive web applications, as noted in the features.

Cons

Feature Scope Limitations

Primarily designed for basic list reordering, it lacks built-in support for advanced scenarios like nested drag and drop or virtualized lists, which might require additional work.

Ecosystem Immaturity

As a newer project with fewer GitHub stars and issues, it may have limited third-party integrations, community tutorials, or long-term maintenance guarantees compared to established libraries.

Frequently Asked Questions

Related Projects

tiptap

The headless rich text editor framework for web artisans.

✅ Painless Vue forms

Last commit7 months ago

form-create

:fire::fire::fire: 强大的低代码动态表单组件，通过 JSON 数据驱动表单渲染，适配移动端，支持可视化设计。提高开发者对表单的开发效率。目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。

Stars7,106

Forks1,105

Last commit15 days ago

vuelidate

Simple, lightweight model-based validation for Vue.js

Stars6,864

Forks481

Last commit1 year ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub