react-beautiful-dnd垂直案例标签

原创

已于 2024-12-11 17:31:14 修改 · 470 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

于 2024-12-11 15:56:14 首次发布

缘由：项目比较古老，ant使用的是4，tag不支持托拽。

使用 react-beautiful-dnd 插件进行开发。

官方地址：GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React

官方案例：Storybook

其他参考： demo文档最开始找到这个，后面发现不是官方地址。。

import React, { useEffect, useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { Space } from 'antd';
import CheckableTag from 'antd/es/tag/CheckableTag';

const getItemKey = (itemName) => {
  switch (itemName) {
    case '包':
      return 'clue_pkg_id';
    case '租户':
      return 'tenant_id';
    case '通道':
      return 'channel_id';
    default:
      return itemName;
  }
};

/**
 * @function 生成初始数组
 * @returns {array}
 * @param items
 * */
const createItems = (items) =>
  items.map((item, index) => ({
    id: `${item}`,
    content: item,
  }));

/**
 * @function 生成排序后的数组
 * @param {array} list 排序前数组
 * @param {number} startIndex 元素在被拖动前所在索引
 * @param {number} endIndex 元素在被拖动后位置所在索引
 * @return {array} result 排序后数组
 * */
const reorder = (list, startIndex, endIndex) => {
  console.log('reorder:', list, startIndex, endIndex);
  const result = Array.from(list); // 深拷贝数组
  if (Math.abs(startIndex - endIndex) > 1) {
    if (startIndex < endIndex) {
      // 将 startIndex 到 endIndex-1 的元素向前移动一位
      for (let i = startIndex; i < endIndex; i++) {
        result[i] = list[i + 1];
      }
      // 将