Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/carlosjorger/vue-fluid-dnd
A Vue 3 drag and drop library to sort all kind of lists. ⭐️ Star to support our work!
https://github.com/carlosjorger/vue-fluid-dnd
dnd drag drag-and-drop draggable drop droppable lightweight sortable typescript vue vue3
Last synced: 2 months ago
JSON representation
A Vue 3 drag and drop library to sort all kind of lists. ⭐️ Star to support our work!
- Host: GitHub
- URL: https://github.com/carlosjorger/vue-fluid-dnd
- Owner: carlosjorger
- License: mit
- Created: 2024-01-13T16:56:30.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-04-13T14:46:03.000Z (3 months ago)
- Last Synced: 2024-04-14T09:38:40.817Z (3 months ago)
- Topics: dnd, drag, drag-and-drop, draggable, drop, droppable, lightweight, sortable, typescript, vue, vue3
- Language: TypeScript
- Homepage: https://vue-fluid-dnd.netlify.app
- Size: 2.43 MB
- Stars: 36
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Lists
- awesome-vue - vue-fluid-dnd - A Vue 3 drag and drop, sortable, dependency-free library with cool animations, a easy to use api using vue composables. (Components & Libraries / UI Components)
- awesome-jekyll - carlosjorger/vue-fluid-dnd - A drag and drop🤜🫳library for Vue 3🌿 (TypeScript)
- trackawesomelist - vue-fluid-dnd (⭐43) - A Vue 3 drag and drop, sortable, dependency-free library with cool animations, a easy to use api using vue composables. (Recently Updated / [Apr 29, 2024](/content/2024/04/29/README.md))
- awesome-stars - carlosjorger/vue-fluid-dnd - A drag and drop🤜🫳library for Vue 3🌿 (TypeScript)
README
Vue Fluid DnD
[](https://github.com/carlosjorger/vue-fluid-dnd/blob/main/LICENSE)
[](https://www.npmjs.com/package/vue-fluid-dnd)
[](https://twitter.com/carlosjorgerc)
[](https://codeclimate.com/github/carlosjorger/vue-fluid-dnd/test_coverage)
A **fluid**, **smooth** and **versatil** drag and drop
library for lists on Vue3. It's a **lightweight** tool ~5 Kb (gzip) with no depenencies.
## ✨ Features
- ✅ **Fully customizable 🎨**.
- ✅ **Zero dependencies 🪶**.
- ✅ **Work with horizontal➡️and vertical list :arrow_down:**.
- ✅ **Mouse 🐭 and touch 👉📱 (mobile, tablet and so on) support**.
- ✅ **Nice documentation 📑 and examples**.
- ✅ **Fully tested 🧪, typed and reliable**.
## 🚀 Getting Started
1. **Install vue-fluid-dnd:**
```bash
# with npm:
npm i vue-fluid-dnd
# with yarn:
yarn add vue-fluid-dnd
# with pnpm:
pnpm i vue-fluid-dnd
```
2. **Import the vue composable**
```js
import { useDragAndDrop } from "vue-fluid-dnd";
```
3. **Create a list that your want to sort an use useDragAndDrop**
```js
// Each element have its own styles or classes and the draggable-id
const listToSort = ref([
{
number: 1,
style:
"color: white; background-color: red; width: 50px; margin: 23px 0;",
},
//...
]);
// create the parent element and set drag and drop configuration on the parent and children elements (creating events, statees, styles, etc) calling useDragAndDrop composable
const { parent } = useDragAndDrop(listToSort);
```
4. **Create childrens**
```jsx
{{ element.number }}
```
5. **Documentation**
- 📚 Check out all the [docs](https://vue-fluid-dnd.netlify.app/).
- 🛠️ Edit the previous [here](https://codesandbox.io/s/nifty-hooks-5plkpl).
- 📘 See others examples [here](https://vue-fluid-dnd.netlify.app/example/vertical-list/single-vertical-list/).
## 🤝 Contributing
If you're interested in contributing to vue-fluid-dnd, please read our contributing docs before submitting a pull request [CONTRIBUTING](./CONTRIBUTING.md).
## 🔑 License
- [MIT](https://github.com/carlosjorger/vue-fluid-dnd/blob/main/LICENSE).