[![Contributors][contributors-shield]][contributors-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![NPM Version][npm-version-shield]][npm-url]
[![MIT License][license-shield]][license-url]

About The Project

[![Product Name Screen Shot][product-screenshot]](https://jcuenod.github.io/vue-tree-dnd-examples/)

There are plenty of drag-n-drop libraries for Vue. None of them (that I found) support a file/folder-like structure that can create new levels of nesting. I created this library with this spec in mind:

* Support dynamic nesting
* Limit draggable options to what is possible
* Clearly indicate where items will be dropped
* Support collapsing nodes

(back to top)

Getting Started

To get a local copy up and running follow these simple example steps.

$3

To install, use your favorite package manager and do the equivalent of:

``sh
npm install -S vue-tree-dnd@latest
`

$3

In Your.vue file, you can import and use the component:

`vue



`

$3

#### Tree Data

Your tree data should conform to the following type:

`ts
type TreeItem = {
id: number | string
expanded: boolean
children: TreeItem[]
}
`

Apart from these properties, you may include any other additional data. This will be passed into the ItemRenderer component.

Note: expanded is a required two-way bound property.

#### Move Mutation

`ts
type MoveMutation = {
id: number | string
targetId: number | string
position: 'LEFT' | 'RIGHT' | 'FIRST_CHILD' | 'LAST_CHILD'
}
`

#### VueTreeDnd

| Prop | Type | Description |
|--|--|--|
| component | Component (Vue) | Vue component that will render the TreeItem (i.e., ItemRenderer). The component will receive the relevant node in the tree (with its children) as a prop. |
| v-model | TreeItem[] | The data to be displayed, conforming to the TreeItem type specified above. |
| locked | boolean | Whether the tree is locked. When true, nodes in the tree will not be draggable. |
| @move | (event: MoveMutation) => void | Handler for move mutation. Event will fire when node is dropped in a valid location. The syntax of the event data is given in MoveMutation. |


#### ItemRenderer

| Prop | Type | Description |
|--|--|--|
| item | TreeItem | The node in the tree that is being rendered. |
| depth | number | Depth of current node. It is ItemRenderer's responsibility to manage indention. |
| expanded | boolean | Whether the node is expanded (or collapsed). It is ItemRenderer's responsibility to indicate expanded state. |
| setExpanded | (value: boolean) => void | Callback to control whether the node is collapsed or expanded. It is ItemRenderer's responsibility to manage expanded. To toggle, call setExpanded(!expanded). |

Your ItemRenderer will be draggable but may perform any other actions you wish. For example, you may want to add a button to delete the node. You can do this by adding a delete method to your ItemRenderer component and using provide/inject from the component that imports vue-tree-dnd.

For example:

`vue



`

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.md` for more information.

(back to top)

[contributors-shield]: https://img.shields.io/github/contributors/jcuenod/vue-tree-dnd.svg?style=for-the-badge
[contributors-url]: https://github.com/jcuenod/vue-tree-dnd/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/jcuenod/vue-tree-dnd.svg?style=for-the-badge
[forks-url]: https://github.com/jcuenod/vue-tree-dnd/network/members
[stars-shield]: https://img.shields.io/github/stars/jcuenod/vue-tree-dnd.svg?style=for-the-badge
[stars-url]: https://github.com/jcuenod/vue-tree-dnd/stargazers
[npm-version-shield]: https://img.shields.io/npm/v/vue-tree-dnd.svg?style=for-the-badge
[npm-url]: https://www.npmjs.com/package/vue-tree-dnd
[issues-shield]: https://img.shields.io/github/issues/jcuenod/vue-tree-dnd.svg?style=for-the-badge
[issues-url]: https://github.com/jcuenod/vue-tree-dnd/issues
[license-shield]: https://img.shields.io/github/license/jcuenod/vue-tree-dnd.svg?style=for-the-badge
[license-url]: https://github.com/jcuenod/vue-tree-dnd/blob/master/LICENSE.txt
[product-screenshot]: ./vue-tree-dnd-demo.gif