Ml-vue-drag-tree NPM

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

demo

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)

1.3.0 New Features

style support ie
css -> less
fixed mouse icon problems when dragover menu-item

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