ml-vue-drag-tree

this pro is base on shuirong's vue-drag-tree,thanks very much😘😘😘!

It's a tree🎄 components(Vue2.x) that allow you to drag and drop the node to exchange their data .Support nested and list

Feature

• Drag and Drop the tree node, even between two different levels
• Controls whether a particular node can be dragged and whether the node can be plugged into other nodes
• Support nested and list
• data and view two-way-data-binding

中文 || Please Star! if it's helpful. Example Project

Preview

Getting Start

Install

npm install ml-vue-drag-tree --save

Usage

A Simple Project Using ml-vue-drag-tree

main.js

import Vue from 'vue'
import VueDragTree from 'ml-vue-drag-tree'
import 'ml-vue-drag-tree/dist/vue-drag-tree.min.css'

Vue.use(VueDragTree)

API

Attributes

| Name | Description | Type | Default | | :--------- | :------------------------------------------------- | :------- | :------- | | data | data of the tree | Array | －－ | | allowDrag | Judging which node can be dragged | Function | ()=>true | | allowDrop | Judging which node can be plugged into other nodes | Function | ()=>true | | openNames | opened submenu names | Array | ()=>[] | | activeName | actived menuitem id | String | '' | | maxCharNum | text max show number in chinese char | Number | 6 |

Events

| Name | Description | arguments | | -------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | | current-node-clicked | Tell you which node was clicked | (model,component) model: node data was clicked． component: VNode data for the node was clicked | | on-data-change | When Tree Data Change | (val) new tree data | | on-node-change | When Node Data Change，return event's type and changed parent node's data and drag node's data | (type, parentNode, node) type: 'remove'/'add' event's type parentNode: changed parentNode node: dragged node's data | | on-open-name-change | When openNames change, return new openNames Array | (arr) new openNames | | drag | The drag event is fired every few hundred milliseconds as an node is being dragged by the user | (model,component,e) model: node data was dragged. component: VNode data for the node was dragged; e: drag event | | drag-enter | The drag-enter event is fired when a dragged node enters a valid drop target | (model,component,e) model: data of the valid drop target; component: VNode of the valid drop target; e: drag event | | drag-leave | The drag-leave event is fired when a dragged node leaves a valid drop target | (model,component,e) model: data of the valid drop target; component: VNode of the valid drop target; e: drag event | | drag-over | The drag-over event is fired when an node is being dragged over a valid drop target | (model,component,e) model: data of the valid drop target; component: VNode of the valid drop target; e: drag event | | drag-end | The drag-end event is fired when a drag operation is being ended | (model,component,e) model: node data was dragged. component: VNode data for the node was dragged; e: drag event | | drop | The drop event is fired when an node is dropped on a valid drop target. | (model,component,e) model: data of the valid drop target; component: VNode of the valid drop target; e: drag event |

License

The 996ICU License (996ICU)