ant-design-vue/components/vc-tree/demo/draggable.vue

<script>
/* eslint no-console:0 */
import './draggable.less';
import Tree, { TreeNode } from '../index';
import '../assets/index.less';
import { gData } from './util';
import BaseMixin from '../../_util/BaseMixin';

export default {
  mixins: [BaseMixin],
  data() {
    return {
      gData,
      autoExpandParent: true,
      expandedKeys: ['0-0-key', '0-0-0-key', '0-0-0-0-key'],
    };
  },
  methods: {
    onDragStart(info) {
      console.log('start', info);
    },
    onDragEnter(info) {
      console.log('enter', info);
      this.setState({
        expandedKeys: info.expandedKeys,
      });
    },
    onDrop(info) {
      console.log('drop', info);
      const dropKey = info.node.eventKey;
      const dragKey = info.dragNode.eventKey;
      const dropPos = info.node.pos.split('-');
      const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
      // const dragNodesKeys = info.dragNodesKeys;
      const loop = (data, key, callback) => {
        data.forEach((item, index, arr) => {
          if (item.key === key) {
            return callback(item, index, arr);
          }
          if (item.children) {
            return loop(item.children, key, callback);
          }
        });
      };
      const data = [...this.gData];
      let dragObj;
      loop(data, dragKey, (item, index, arr) => {
        arr.splice(index, 1);
        dragObj = item;
      });
      if (info.dropToGap) {
        let ar;
        let i;
        loop(data, dropKey, (item, index, arr) => {
          ar = arr;
          i = index;
        });
        if (dropPosition === -1) {
          ar.splice(i, 0, dragObj);
        } else {
          ar.splice(i + 1, 0, dragObj);
        }
      } else {
        loop(data, dropKey, item => {
          item.children = item.children || [];
          // where to insert 示例添加到尾部，可以是随意位置
          item.children.push(dragObj);
        });
      }
      this.setState({
        gData: data,
      });
    },
    onExpand(expandedKeys) {
      console.log('onExpand', arguments);
      this.setState({
        expandedKeys,
        autoExpandParent: false,
      });
    },
  },

  render() {
    const loop = data => {
      return data.map(item => {
        if (item.children && item.children.length) {
          return (
            <TreeNode key={item.key} title={item.title}>
              {loop(item.children)}
            </TreeNode>
          );
        }
        return <TreeNode key={item.key} title={item.title} />;
      });
    };
    return (
      <div class="draggable-demo">
        <h2>draggable</h2>
        <p>drag a node into another node</p>
        <div class="draggable-container">
          <Tree
            expandedKeys={this.expandedKeys}
            onExpand={this.onExpand}
            autoExpandParent={this.autoExpandParent}
            draggable
            onDragstart={this.onDragStart}
            onDragenter={this.onDragEnter}
            onDrop={this.onDrop}
          >
            {loop(this.gData)}
          </Tree>
        </div>
      </div>
    );
  },
};
</script>