ant tree拖动排序 实现同级拖动 和 跨级拖动

2 篇文章 0 订阅
import { Tree } from 'antd';
import { useState } from 'react';

let findResult;
const treeList = [
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        disabled: true,
        children: [
          {
            title: 'leaf',
            key: '0-0-0-0',
            disableCheckbox: true,
          },
          {
            title: 'leaf',
            key: '0-0-0-1',
          },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [{ title: <span style={{ color: '#1890ff' }}>sss</span>, key: '0-0-1-0' }],
      },
    ],
  },
];
const findItem = (data, node, parentItem) => {
    data.find((item) => {
      if (item?.key === node?.key) {
        if (parentItem) {
          item.parent = parentItem;
          return (findResult = item);
        } else return (findResult = item);
      } else if (item?.children?.length) {
        return (findResult = findItem(item.children, node, item));
      }
    });
    return findResult;
  },
// dropPosition -1是移动到和他平级在他上面    1是移动到和他平级在他下面  0是移动到他下面作为他子集
 dealDrap = (dragNode, node, treeData, dropPosition) => {
  let dragNodeResult, nodeResult;
  findResult = '';
  dragNodeResult = findItem(treeData, dragNode);
  findResult = '';
  nodeResult = findItem(treeData, node);
  // 0是移动到他下面作为他子集
  if (dropPosition === 0) {
    if (dragNodeResult?.parent?.key === nodeResult?.key) return true;
    return false;
  }
  // -1是移动到和他平级在他上面    1是移动到和他平级在他下面
  if (dropPosition === 1 || dropPosition === -1) {
    // 都有父
    if (dragNodeResult?.parent && nodeResult?.parent) {
      // 父相等
      if (dragNodeResult?.parent?.key == nodeResult?.parent?.key) {
        return true;
      } else {
        return false;
      }
    }
    //有父无父
    if (dragNodeResult?.parent && !nodeResult?.parent) {
      return false;
    }
    // 无父有父
    if (!dragNodeResult?.parent && nodeResult?.parent) {
      return false;
    }
    if (!dragNodeResult?.parent && !nodeResult?.parent) {
      return true;
    }
  }
};

// canRandom true可以随意拖动  false只限平级拖动
const TreeTuo = ({ canRandom }) => {
  const [treeData, setTreeData] = useState(treeList),
    // 官方提供的方法可以随意拖动
    onDrop = info => {
      const dropKey = info.node.key;
      const dragKey = info.dragNode.key;
      const dropPos = info.node.pos.split('-');
      const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);

      // 实现平级拖动的限制
      if (!canRandom) {
        const dealData = JSON.parse(JSON.stringify(treeData));
        const result = dealDrap(info.dragNode, info.node, [...dealData], dropPosition);
        if (!result) return;
      }

      const loop = (data, key, callback) => {
        for (let i = 0; i < data.length; i++) {
          if (data[i].key === key) {
            return callback(data[i], i, data);
          }
          if (data[i].children) {
            loop(data[i].children, key, callback);
          }
        }
      };
      const data = [...treeData];

      // Find dragObject
      let dragObj;
      loop(data, dragKey, (item, index, arr) => {
        arr.splice(index, 1);
        dragObj = item;
      });

      if (!info.dropToGap) {
        // Drop on the content
        loop(data, dropKey, item => {
          item.children = item.children || [];
          // where to insert 示例添加到头部,可以是随意位置
          item.children.unshift(dragObj);
        });
      } else if (
        (info.node.props.children || []).length > 0 && // Has children
        info.node.props.expanded && // Is expanded
        dropPosition === 1 // On the bottom gap
      ) {
        loop(data, dropKey, item => {
          item.children = item.children || [];
          // where to insert 示例添加到头部,可以是随意位置
          item.children.unshift(dragObj);
          // in previous version, we use item.children.push(dragObj) to insert the
          // item to the tail of the children
        });
      } else {
        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);
        }
      }
      setTreeData(data);
    };
  return <Tree draggable blockNode onDrop={onDrop} treeData={treeData} />;
};

export default TreeTuo;

  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Ant Design Vue 是一个基于 Vue.js 的 UI 组件库,而 vuedraggable 是一个 Vue.js 的拖放组件。两者结合使用,可以实现拖拽排序的功能。 首先,需要在项目中安装 Ant Design Vue 和 vuedraggable: ``` npm install ant-design-vue vuedraggable --save ``` 接着,在需要使用拖拽排序功能的组件中,引入 vuedraggable 组件: ```html <template> <div> <draggable v-model="list" :options="{handle:'.drag-handle'}"> <div v-for="(item, index) in list" :key="item.id"> <span class="drag-handle">☰</span> {{ item.name }} </div> </draggable> </div> </template> <script> import draggable from 'vuedraggable'; export default { components: { draggable, }, data() { return { list: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, { id: 4, name: 'Item 4' }, { id: 5, name: 'Item 5' }, ], }; }, }; </script> ``` 在上述示例中,我们使用了 v-model 绑定了一个数组 `list`,这个数组里面包含了需要排序的元素。然后,在 `draggable` 组件中,我们使用了 `v-for` 循环渲染了每个元素,并且给每个元素添加了一个拖拽的句柄(也就是 `drag-handle` 类的元素)。 最后,我们还需要在 `options` 属性中传入一个选项对象,这个对象包含了一个 `handle` 属性,它指定了拖拽句柄的 CSS 选择器。 这样,我们就可以通过拖拽句柄来实现拖拽排序了。当用户拖动一个元素时,它会被移动到新的位置上,并且 `list` 数组中对应的元素顺序也会发生改变。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值