wox-admin-tree

react ui tree for drag limit

Usage no npm install needed!

<script type="module">
  import woxAdminTree from 'https://cdn.skypack.dev/wox-admin-tree';
</script>

README

Tree image

基于 react-ui-tree,针对拖拽做了一些限制

Example

const tree = {
  module: 'tree',
  children: [
    {
      module: 'parentA',
      children: [
        {
          module: 'a1'
        },
        {
          module: 'a2'
        },
      ]
    },
    {
      module: 'b'
    }
  ]
};
// a1/a2 只能在parentA里面移动, b也不能移动到 parentA里面

Installation

npm install wox-react-tree

Usage

<Tree
  paddingLeft={20}              // left padding for children nodes in pixels
  tree={this.state.tree}        // tree object
  onChange={this.handleChange}  // onChange(tree) tree object changed
  renderNode={this.renderNode}  // renderNode(node) return react element
/>

// a sample tree object
// node.children, node.collapsed, node.leaf properties are hardcoded
{
  "module": "react-ui-tree",
  "children": [{
    "collapsed": true,
    "module": "dist",
    "children": [{
      "module": "node.js"
    }]
  }]
}

api请直接查看 react-ui-tree