react-beautiful-dnd垂直案例标签

🕗 发布于 2024-12-12 09:54 react.js 前端前端框架

缘由：项目比较古老，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];
      }
      // 将 startIndex 元素放到 endIndex 位置
      result[endIndex] = list[startIndex];
    } else {
      // 将 endIndex+1 到 startIndex 的元素向后移动一位
      for (let i = startIndex; i > endIndex; i--) {
        result[i] = list[i - 1];
      }
      // 将 startIndex 元素放到 endIndex 位置
      result[endIndex] = list[startIndex];
    }
  } else {
    // 如果相差为1，直接交换两个元素
    [result[startIndex], result[endIndex]] = [list[endIndex], list[startIndex]];
  }
  return result;
};

const HeaderSearchGroupDrag = (props) => {
  //['clue_pkg_id', 'tenant_id', 'channel_id']
  const [items, setItems] = useState(createItems(['包', '租户', '通道']));
  const [selectedTags, setSelectedTags] = useState(['包', '租户', '通道']);

  useEffect(() => {
    console.log('selectedTags:', selectedTags)
  }, [selectedTags]);

  const onDragEnd = (result) => {
    console.log('onDragEnd-result:', result);
    if (!result.destination) {
      return;
    }
    const itemsR = reorder(items, result.source.index, result.destination.index);
    console.log('onDragEnd:', result, itemsR);
    setItems(itemsR);
  };

  const tagCheckHandleChange = (tag, checked) => {
    const nextSelectedTags = checked
      ? [...selectedTags, tag]
      : selectedTags.filter((t) => t !== tag);
    console.log('You are interested in: ', nextSelectedTags);
    setSelectedTags(nextSelectedTags);
  };

  /**
   * @function 渲染拖拽项目
   * @param {array} dragArray
   * @return {array} react element
   * */
  const renderDragItem = () => {
    let dragElement = null;
    console.log('renderDragItem1212121212', items);
    dragElement = items.map((item, index) => {
      const dragItem = (
        <Draggable key={item.content} draggableId={item.content} index={index}>
          {(provided) => (
            <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
              <CheckableTag
                checked={selectedTags.indexOf(item.content) > -1}
                color="success"
                onChange={(checked) => tagCheckHandleChange(item.content, checked)}
                key={'CheckableTag:' + item.content}
              >
                {item.content}
              </CheckableTag>
            </div>
          )}
        </Draggable>
      );
      return dragItem;
    });
    return dragElement;
  };

  return (
    <div className="root">
      <DragDropContext onDragEnd={onDragEnd}>
        {/* Your target */}
        <Droppable droppableId="id" direction="horizontal">
          {(provided) => (
            <div ref={provided.innerRef} {...provided.droppableProps}>
              <Space>{renderDragItem()}</Space>
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    </div>
  );
};

export default HeaderSearchGroupDrag;

增加传参，排序。

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];
      }
      // 将 startIndex 元素放到 endIndex 位置
      result[endIndex] = list[startIndex];
    } else {
      // 将 endIndex+1 到 startIndex 的元素向后移动一位
      for (let i = startIndex; i > endIndex; i--) {
        result[i] = list[i - 1];
      }
      // 将 startIndex 元素放到 endIndex 位置
      result[endIndex] = list[startIndex];
    }
  } else {
    // 如果相差为1，直接交换两个元素
    [result[startIndex], result[endIndex]] = [list[endIndex], list[startIndex]];
  }
  return result;
};

// 按照 items 的顺序 调整 selectedTags 的顺序
// selectedTags 的所有值 都包含在 items 中，可能会比 items值要少。 需要 将selectedTags 已有值 按照 items值的顺序进行调整。
const selectedTagsSort = (items, selectedTags) => {
  const result = Array.from(selectedTags); // 深拷贝数组
  var i = 0;
  for (let j = 0; j < items.length; j++) {
    var item = items[j];
    if (selectedTags.includes(item.id)) {
      result[i] = item.id;
      i++;
    }
  }
  return result;
};

const HeaderSearchGroupDrag = (props) => {
  const { setGroupFiledList } = props;

  //['clue_pkg_id', 'tenant_id', 'channel_id']
  const [items, setItems] = useState(createItems(['包', '租户', '通道']));
  const [selectedTags, setSelectedTags] = useState(['包', '租户', '通道']);

  useEffect(() => {
    console.log('selectedTags:', selectedTags);
    console.log('items:', items);
    // 转换为 key。
    setGroupFiledList(selectedTags.map((item) => getItemKey(item)));
  }, [selectedTags]);

  const onDragEnd = (result) => {
    if (!result.destination) {
      return;
    }
    const itemsR = reorder(items, result.source.index, result.destination.index);
    setItems(itemsR);

    let sort = selectedTagsSort(itemsR, selectedTags);
    setSelectedTags(sort)
  };

  const tagCheckHandleChange = (tag, checked) => {
    const nextSelectedTags = checked
      ? [...selectedTags, tag]
      : selectedTags.filter((t) => t !== tag);
    console.log('You are interested in: ', nextSelectedTags);
    let sort = selectedTagsSort(items, nextSelectedTags);
    setSelectedTags(sort);
  };

  /**
   * @function 渲染拖拽项目
   * @param {array} dragArray
   * @return {array} react element
   * */
  const renderDragItem = () => {
    let dragElement = null;
    dragElement = items.map((item, index) => {
      const dragItem = (
        <Draggable key={item.content} draggableId={item.content} index={index}>
          {(provided) => (
            <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
              <CheckableTag
                checked={selectedTags.indexOf(item.content) > -1}
                color="success"
                onChange={(checked) => tagCheckHandleChange(item.content, checked)}
                key={'CheckableTag:' + item.content}
              >
                {item.content}
              </CheckableTag>
            </div>
          )}
        </Draggable>
      );
      return dragItem;
    });
    return dragElement;
  };

  return (
    <div className="root">
      <DragDropContext onDragEnd={onDragEnd}>
        {/* Your target */}
        <Droppable droppableId="id" direction="horizontal">
          {(provided) => (
            <div ref={provided.innerRef} {...provided.droppableProps}>
              <Space>{renderDragItem()}</Space>
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    </div>
  );
};

export default HeaderSearchGroupDrag;

原文地址：https://blog.csdn.net/qq_42390636/article/details/144403003

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：【区块链】区块链密码学基础
下一篇：React的功能是什么？

【开源免费】基于SpringBoot+Vue.JS加油站管理系统（JAVA毕业设计）
Vue.js+SpringBoot前后端分离新手入门项目《加油站管理系统》，包括论坛模块、加油站模块、汽油模块、加油模块
阅读更多2024-12-12
使用wol-web通过NAS远程唤醒电脑
相信很多人都有远程开机的需求，有时候需要远程控制家中的电脑办公、玩游戏。远程控制比较好实现，安装类似向日葵的软件即可。而远程开机稍微麻烦一点，有的通过物理开关实现（开机棒）我们选择远程网络唤醒的方式实
阅读更多2024-12-12
如何使用 Webpack ModuleFederationPlugin 构建微前端架构
在前端开发中，构建和部署大型应用程序变得越来越复杂。为了更好地管理这些复杂性，模块联邦（Module Federation）作为 Webpack 5 的一部分应运而生。模块联邦允许我们将应用程序拆分为
阅读更多2024-12-12
深入理解JavaScript中的自定义属性操作|style 样式属性操作|className 类名属性操作
通过本文的介绍，我们了解了如何使用JavaScript中的和方法来操作自定义属性，以及如何通过style属性和className属性来操作元素的样式和类名。掌握这些技巧可以帮助你在Web开发中更灵活地
阅读更多2024-12-12
Linux——rootfs根文件系统构建
根文件系统也叫做rootfsFATFS这类的文件系统属于Linux内核的一部分，属于软件代码，所以ROOTFS不等于FATFS。Linux的根文件系统实际上是一个文件夹或者叫目录，这个目录下会有许多子
阅读更多2024-12-12
SAP借助GenAI助力S/4HANA迁移，应对2027支持终止期限
针对用户对复杂定制系统迁移的担忧，SAP推出了一系列工具和方法，提高了对ECC现状的透明度和管理能力。SAP的挑战在于，尽管技术工具不断优化，但大量用户尚未开始迁移，这对系统集成商的资源和能力构成了极
阅读更多2024-12-12
latex公式符号
{}属于符号(右下划线)花体。
阅读更多2024-12-12
SpringBoot常见的注解
在 Spring Boot 开发中，注解是简化开发过程和提高效率的核心工具。通过使用各种注解，我们可以实现依赖注入、配置管理、Web 开发、数据访问等功能。以下是一些常见的 Spring Boot 注
阅读更多2024-12-12
交换排序(Swap Sort)详解
主要是通过两两比较待排元素的关键字，若发现与排序要求相逆，则交换之。在这类排序方法中最常见的是，其中快速排序是一种在实际应用中具有很好表现的算法。
阅读更多2024-12-12
Golang学习笔记_03——匿名函数和闭包
匿名函数，顾名思义，就是没有名称的函数。它们可以在需要函数值或函数类型的表达式中直接定义。闭包是指一个函数以及该函数所引用的所有外部变量的集合。闭包允许函数记住并访问其词法作用域（即定义时的环境）中的
阅读更多2024-12-12

react-beautiful-dnd垂直案例标签

相关文章