推荐一个react拖拽排序的库，@dnd-kit

已于 2023-09-28 09:22:14 修改
阅读量775 收藏 3
点赞数
分类专栏： React技术栈相关 文章标签： react.js dnd-kit 拖拽排序
于 2023-09-27 17:33:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BWater_monster/article/details/133359046
版权

@dnd-kit

@dnd-kit

官网
GitHub

基于这个库封装了一个组件

效果图

在这里插入图片描述

代码

index
import { forwardRef, ForwardedRef, useState, useRef, useCallback, useMemo } from 'react';
import { Checkbox } from 'antd';
import { CheckboxChangeEvent } from 'antd/es/checkbox';
import { Resizable, NumberSize, ResizeDirection } from 're-resizable';
import type { ERPTransferProps, ERPTransferRef } from './type';
import { LeftHeaderLeft, LeftHeaderRight, RightHeaderLeft, RightHeaderRight } from './components/headers';
import DraggableList from './components/draggable';
import { LeftSearch } from './components/search';
import './index.less';
import { debounce, isUndefined } from 'lodash-es';

type ResizeCallbackParams = [MouseEvent | TouchEvent, ResizeDirection, HTMLElement, NumberSize];

function Index<T>(props: ERPTransferProps<T>, ref: ForwardedRef<ERPTransferRef<T>>) {
  const {
    width = 688,
    height = 376,
    transferWidth = 336,
    allowResizable = false,
    dataSource,
    keyCode,
    nameCode,
    leftHeaderLeft,
    leftHeaderRight,
    rightHeaderLeft,
    rightHeaderRight,
    onChange,
  } = props;

  const [leftWidth, setLeftWidth] = useState(transferWidth);
  const [rightWidth, setRightWidth] = useState(transferWidth);
  const leftWidthRef = useRef(transferWidth);
  const rightWidthRef = useRef(transferWidth);
  const [selectedKeys, setSelectedKeys] = useState<(string | number)[]>([]);
  const [searchLeftData, setSearchLeftData] = useState<T[]>();
  const [searchRightData, setSearchRightData] = useState<T[]>();

  // 用map对象存一下dataSource
  const dataSourceMapMemo = useMemo(() => {
    return new Map(dataSource.map((i) => [i[keyCode], i]));
  }, [dataSource]);

  /* —————————————————————————拖拽的回调处理—————————————————————————————————— */
  const onLeftResize = useCallback((...rest: ResizeCallbackParams) => {
    const { width } = rest[3];
    setLeftWidth(leftWidthRef.current + width);
    setRightWidth(rightWidthRef.current - width);
  }, []);
  const onRightResize = useCallback((...rest: ResizeCallbackParams) => {
    const { width } = rest[3];
    setRightWidth(rightWidthRef.current + width);
    setLeftWidth(leftWidthRef.current - width);
  }, []);

  const onLeftResizeStop = useCallback((...rest: ResizeCallbackParams) => {
    const { width } = rest[3];
    leftWidthRef.current = leftWidthRef.current + width;
    rightWidthRef.current = rightWidthRef.current - width;
  }, []);
  const onRightResizeStop = useCallback((...rest: ResizeCallbackParams) => {
    const { width } = rest[3];
    leftWidthRef.current = leftWidthRef.current - width;
    rightWidthRef.current = rightWidthRef.current + width;
  }, []);

  /* —————————————————————————左侧—————————————————————————————————— */
  const handleClickItem = (e: CheckboxChangeEvent, keyCode: string) => {
    const checked = e.target.checked;
    if (checked) {
      const selectedKeysTemp = [...selectedKeys, keyCode];
      setSelectedKeys(selectedKeysTemp);
      handleOnchange(selectedKeysTemp);
    } else {
      const selectedKeysTemp = selectedKeys.filter((item) => item !== keyCode);
      setSelectedKeys(selectedKeysTemp);
      handleOnchange(selectedKeysTemp);
    }
  };
  const handleAllSelected = (all: boolean) => {
    if (all) {
      const selectedKeysTemp = dataSource.map((item) => item[keyCode]);
      setSelectedKeys(selectedKeysTemp);
      handleOnchange(selectedKeysTemp);
    } else {
      setSelectedKeys([]);
      handleOnchange([]);
    }
  };
  const handleLeftSearch = (searchText: string) => {
    if (searchText === '') {
      setSearchLeftData(undefined);
    } else {
      const searchResult = dataSource.filter((i) => i[nameCode].includes(searchText));
      setSearchLeftData(searchResult);
    }
  };
  /* —————————————————————————右侧—————————————————————————————————— */
  const handleOnClean = () => {
    setSelectedKeys([]);
    handleOnchange([]);
  };
  const handleRightSearch = (searchText: string) => {
    if (searchText === '') {
      setSearchRightData(undefined);
    } else {
      const searchResult = dataSource.filter((i) => i[nameCode].includes(searchText));
      setSearchRightData(searchResult);
    }
  };
  const handleDraggableListData = () => {
    if (!searchRightData) return selectedKeys;
    else {
      return searchRightData.filter((i) => selectedKeys.includes(i[keyCode])).map((i) => i[keyCode]);
    }
  };

  /* —————————————————————————onChange—————————————————————————————————— */
  const handleOnchange = (keys: (string | number)[]) => {
    let result: T[] = [];
    for (const key of keys) {
      if (dataSourceMapMemo.has(key)) {
        result.push(dataSourceMapMemo.get(key)!);
      }
    }
    onChange?.(result);
  };

  return (
    <div style={{ width, height }} className="panui-fi-transfer-erp-container">
      <Resizable
        size={{ width: leftWidth, height }}
        onResize={onLeftResize}
        onResizeStop={onLeftResizeStop}
        enable={{
          right: allowResizable,
        }}
      >
        <div className="left-wrapper">
          <div className="left-header">
            <LeftHeaderLeft
              numerator={selectedKeys.length}
              denominator={dataSource.length}
              leftHeaderLeft={leftHeaderLeft}
              onChange={handleAllSelected}
            />
            <LeftHeaderRight leftHeaderRight={leftHeaderRight} />
          </div>
          <LeftSearch onChange={debounce(handleLeftSearch, 300)} />
          <ul className="list">
            {(searchLeftData ?? dataSource).map((i) => (
              <li key={i[keyCode]} className="li-item">
                <Checkbox checked={selectedKeys.includes(i[keyCode])} onChange={(e) => handleClickItem(e, i[keyCode])}>
                  {i[nameCode]}
                </Checkbox>
              </li>
            ))}
            {searchLeftData?.length === 0 && <li className="li-item-no">无搜索结果</li>}
          </ul>
        </div>
      </Resizable>
      <Resizable
        size={{ width: rightWidth, height }}
        onResize={onRightResize}
        onResizeStop={onRightResizeStop}
        enable={{
          left: allowResizable,
        }}
      >
        <div className="right-wrapper">
          <div className="right-header">
            <RightHeaderLeft selected={selectedKeys.length} rightHeaderLeft={rightHeaderLeft} />
            <RightHeaderRight rightHeaderRight={rightHeaderRight} onClean={handleOnClean} />
          </div>
          <LeftSearch onChange={debounce(handleRightSearch, 300)} />
          <div className="list">
            <DraggableList
              data={handleDraggableListData()}
              setSortData={setSelectedKeys}
              dataSourceMap={dataSourceMapMemo}
              nameCode={nameCode}
              handleOnchange={handleOnchange}
              disabledDraggable={!isUndefined(searchRightData)}
            />
          </div>
        </div>
      </Resizable>
    </div>
  );
}

export default forwardRef(Index);
less
.panui-fi-transfer-erp-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  .left-wrapper {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(227, 231, 237, 1);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    .left-header {
      border-bottom: 1px solid #e3e7ed;
      color: #86909c;
      display: flex;
      justify-content: space-between;
      .left-header-left {
        height: 38px;
        line-height: 38px;
        padding-left: 12px;
        .ant-checkbox + span {
          color: #86909c;
        }
      }
      .left-header-right {
        line-height: 38px;
        padding-right: 12px;
      }
    }
    .list {
      margin: 0;
      padding: 0;
      list-style: none;
      flex: 1;
      overflow: hidden auto;
      .li-item {
        line-height: 32px;
        padding-left: 12px;
        cursor: pointer;
        &:hover {
          background-color: #e6ecfa;
        }
        .panui-base-checkbox-container {
          width: 100%;
          margin-right: 4px;
          .ant-checkbox {
            .ant-checkbox-inner {
              border-radius: 4px;
            }
            & + span {
              width: 100%;
            }
          }
        }
      }
      .li-item-no {
        text-align: center;
        color: #86909c;
        line-height: 64px;
      }
    }
  }
  .right-wrapper {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(227, 231, 237, 1);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    .right-header {
      border-bottom: 1px solid #e3e7ed;
      color: #86909c;
      display: flex;
      justify-content: space-between;
      .right-header-left {
        line-height: 38px;
        padding-left: 12px;
      }
      .right-header-right {
        line-height: 38px;
        padding-right: 12px;
        color: #0e42d2;
        cursor: pointer;
      }
    }
    .list {
      padding: 0 12px;
      flex: 1;
      overflow: hidden auto;
      .li-item {
        width: 100%;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        border: 1px solid transparent;
        align-items: center;
        .li-item-name {
          height: 30px;
          display: flex;
          align-items: center;
          span {
            height: inherit;
          }
          .panui-icon-anticon {
            display: flex;
            align-items: center;
            cursor: grab;
          }
        }
        .panui-icon-anticon {
          cursor: pointer;
        }
      }
      .li-item[aria-pressed='true'] {
        background: rgba(223, 0, 36, 0.04);
        border: 1px solid rgba(223, 0, 36, 0.3);
        border-radius: 4px;
        .li-item-name {
          visibility: hidden;
        }
        .li-item-name + span {
          visibility: hidden;
        }
      }
      .li-item.li-item-overlay {
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(223, 0, 36, 0.3);
        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        cursor: grabbing;
        .panui-icon-anticon {
          cursor: grabbing;
        }
        .li-item-name {
          color: #86909c;
        }
        .li-item-name + span {
          visibility: hidden;
        }
      }
      .li-item.li-item-disabled-draggable {
        .panui-icon-anticon {
          cursor: default;
        }
      }
    }
  }
  .search-container {
    padding: 8px 12px;
  }
}
components
// header
import React from 'react';
import { Checkbox } from 'antd';
interface LeftHeaderLeftProps {
  leftHeaderLeft?: (numerator: number, denominator: number) => React.ReactNode;
  numerator: number;
  denominator: number;
  onChange: (all: boolean) => void;
}

export const LeftHeaderLeft = (props: LeftHeaderLeftProps) => {
  const { leftHeaderLeft, numerator, denominator, onChange } = props;
  return (
    <div className="left-header-left">
      <Checkbox
        indeterminate={numerator > 0 && denominator !== numerator}
        checked={numerator === denominator}
        onChange={(e) => onChange(e.target.checked)}
      >
        {leftHeaderLeft ? leftHeaderLeft(numerator, denominator) : `${numerator}/${denominator}`}
      </Checkbox>
    </div>
  );
};

export const LeftHeaderRight = ({ leftHeaderRight }: { leftHeaderRight?: React.ReactNode }) => {
  return leftHeaderRight ? <div>{leftHeaderRight}</div> : <span className="left-header-right">可选择</span>;
};

export const RightHeaderLeft = ({
  selected,
  rightHeaderLeft,
}: {
  selected: number;
  rightHeaderLeft?: (selected: number) => React.ReactNode;
}) => {
  return rightHeaderLeft ? (
    <div>{rightHeaderLeft(selected)}</div>
  ) : (
    <span className="right-header-left">
      已选择 <span style={{ color: '#1D2129' }}>{selected}</span>
    </span>
  );
};

export const RightHeaderRight = ({
  rightHeaderRight,
  onClean,
}: {
  rightHeaderRight?: React.ReactNode;
  onClean: () => void;
}) => {
  return rightHeaderRight ? (
    <div>{rightHeaderRight}</div>
  ) : (
    <span className="right-header-right" onClick={onClean}>
      清空
    </span>
  );
};


// Search
import { Input } from 'antd';
export function LeftSearch({ onChange }: { onChange: (searchText: string) => void }) {
  return (
    <div className="search-container">
      <Input placeholder="搜索" suffix="放大镜" onChange={(e) => onChange(e.target.value)} />
    </div>
  );
}


// draggable
import React, { useState } from 'react';
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  DragEndEvent,
  DragOverlay,
  DragStartEvent,
} from '@dnd-kit/core';
import {
  arrayMove,
  SortableContext,
  sortableKeyboardCoordinates,
  verticalListSortingStrategy,
} from '@dnd-kit/sortable';
import { restrictToVerticalAxis, restrictToParentElement } from '@dnd-kit/modifiers';

import { SortableItem } from './sortItem';
import { isEmpty } from 'lodash-es';

interface DraggableListProps<T> {
  data: (string | number)[];
  setSortData: React.Dispatch<React.SetStateAction<(string | number)[]>>;
  dataSourceMap: Map<string | number, T>;
  nameCode: string;
  handleOnchange: (keys: (string | number)[]) => void;
  disabledDraggable?: boolean;
}

export default function Index<T>(props: DraggableListProps<T>) {
  const { data, setSortData, dataSourceMap, nameCode, handleOnchange, disabledDraggable } = props;
  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    }),
  );

  const handleDeleteItem = (id: string | number) => {
    setSortData((items) => {
      const keys = items.filter((item) => item !== id);
      handleOnchange(keys);
      return keys;
    });
  };
  const [activeId, setActiveId] = useState<string | number | null>(null);

  return (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCenter}
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
      modifiers={[restrictToParentElement]}
    >
      <SortableContext items={data} strategy={verticalListSortingStrategy} disabled={disabledDraggable}>
        {data.map((i) => (
          <SortableItem
            key={i}
            id={i}
            name={dataSourceMap.get(i)?.[nameCode]}
            deleteItem={handleDeleteItem}
            className={disabledDraggable ? 'li-item-disabled-draggable' : ''}
          />
        ))}
        {isEmpty(data) && disabledDraggable && (
          <span
            style={{
              display: 'inline-block',
              width: '100%',
              textAlign: 'center',
              color: '#86909c',
              lineHeight: '64px',
            }}
          >
            无搜索结果
          </span>
        )}
      </SortableContext>
      <DragOverlay>
        {activeId ? (
          <SortableItem
            key={activeId}
            id={activeId}
            name={dataSourceMap.get(activeId)?.[nameCode]}
            className="li-item-overlay"
          />
        ) : null}
      </DragOverlay>
    </DndContext>
  );

  function handleDragStart(event: DragStartEvent) {
    setActiveId(event.active.id);
  }
  function handleDragEnd(event: DragEndEvent) {
    const { active, over } = event;
    if (active.id !== over?.id && over) {
      setSortData((items) => {
        const oldIndex = items.indexOf(active.id);
        const newIndex = items.indexOf(over?.id);
        const keys = arrayMove(items, oldIndex, newIndex);
        handleOnchange(keys);
        return keys;
      });
    }
  }
}

// SortableItem
import { useSortable } from '@dnd-kit/sortable';
import classNames from 'classnames';
import { CSS } from '@dnd-kit/utilities';
import { PWrong1Outlined, PDrag2Filled } from '@panui/icons';

interface SortableItemProps {
  id: string | number;
  name: string;
  deleteItem?: (id: string | number) => void;
  className?: string;
}

export function SortableItem(props: SortableItemProps) {
  const { id, name, deleteItem, className } = props;
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

  return (
    <div ref={setNodeRef} style={style} className={classNames(['li-item', className])} {...attributes}>
      <div className="li-item-name">
        <span {...listeners}>
          <PDrag2Filled />
        </span>
        <span style={{ marginLeft: '8px' }}>{name}</span>
      </div>
      <span onClick={() => deleteItem?.(id)}>
        <PWrong1Outlined />
      </span>
    </div>
  );
}

PS：

  1. 线性的复选框是又封装了一层，贴的代码里换成了antd的

一些基本使用总结

  1. 基本demo地址
  2. 内容要嵌套在DndContext组件中
  3. DndContext的modifiers属性控制运动检测坐标，作用如：锁定x、y等
  4. listeners属性可以用来指定可拖拽的dom，setNodeRef给要拖拽的dom
  5. DragOverlay组件是拖拽覆盖的组件，通过handleDragStart来配合拖拽的是哪个
  6. 可以通过属性选择器[aria-pressed=‘true’]来判断当前拖拽的是哪个
ATWLee
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-一个快速轻量级的拖放和可排序的React库
08-14
一个快速，轻量级的拖放和可排序的React库
react经验15:拖拽排序组件dnd-kit的使用经验
Comvir的专栏
05-11 633
使用dnd-kit实现列表成员的鼠标拖拽排序。
React 拖拽排序组件库对比研究
油墨香^-^的博客
05-23 236
react-dnddnd-kitreact-dnd文档齐全github star星数16.4k维护更新良好，最近一月内有更新维护学习成本较高功能中等移动端兼容情况，良好示例数量中等概念较多，使用复杂组件间能解耦文档齐全github star星数24.8k维护更新良好，最近三月内有更新维护学习成本较高使用易度中等功能丰富移动端兼容情况，优秀示例数量丰富是为垂直和水平列表专门构建的更高级别的抽象，没有提供 react-dnd 提供的广泛功能。
dnd-kit：用于React的现代，轻量级，高性能，可访问和可扩展的拖放工具箱
02-05
总览 为React而构建：公开了诸如和 ，并且不需要您重新构建应用程序或创建其他包装DOM节点。 功能打包：可自定义的碰撞检测算法，多个激活器，可拖动的覆盖图，拖动手柄，自动滚动，约束等等。 支持广泛的用例：垂直列表，水平列表，网格，多个容器，嵌套上下文，可变大小的列表和网格，转换后的项目，虚拟化列表。 零依赖关系和模块化：库的核心大约缩减了10kb，并且没有外部依赖关系。 它基于内置的React状态管理和上下文构建，这使库保持精简。 内置支持多种输入法：指针，鼠标，触摸和键盘传感器。 完全可定制和可扩展：定制每个细节：动画，过渡，行为，样式。 建立自己的传感器，碰撞检测算法，自定
react 基于 dnd-kit 封装的拖拽排序组件
weixin_52014110的博客
11-08 6481
react 基于 dnd-kit 进一步封装的拖拽排序组件，作用：将其抽取成一个只需传入列表和对于的回调方法、使用更为简单的组件。
React拖拽组件dnd-kit的引入和使用
A15029296293的博客
10-31 3929
最近在项目上有个模块需要实现拖拽功能，选了很久的拖拽组件，最后选择了dnd-kit组件库，原因在于这个组件比较新，并且近期还在维护，还有相对应的学习文档可以查看。
react拖拽组件dnd-kit拖拽事件与点击事件冲突问题解决
A15029296293的博客
11-22 1101
事件捕获用过都不行、寻找了很多办法无果，dnd-kit官方文档给出了Sensors传感器的概念，功能大概意思就是比如鼠标按下拖拽组件需要移动多少个像素才触发拖拽事件、或者是等待多少毫秒触发拖拽事件。例如我写的传感器如下，鼠标按下需要移动5个像素才激活拖拽事件， 这样当地点击功能按钮时，鼠标没有移动，自然就触发了点击事件。传感器如何应用：应用起来也非常简单，在DndContext标签上加个sensors属性就应用好了。记录在拖拽功能中拖拽组件与点击事件冲突，导致点击事件无法触发，点击只会触发拖拽事件。
react中使用dnd-kit实现拖曳排序功能
最新发布
qq_62352333的博客
06-24 832
由于前阵子需要在开发 Picals 的时候，需要实现一些拖动排序的功能。虽然有原生的浏览器 dragger API，不过纯靠自己手写很难实现自己想要的效果，更多的是吃力不讨好。于是使用了这个库来实现，在这里记录一下踩的坑。
react项目使用react-dnd实现拖拽排序
02-26
这个示例展示了如何在React项目中使用React DND库实现拖拽排序的基本步骤。在实际应用中，你可能需要根据具体需求进行调整，例如添加动画效果、错误处理等。总之，React DND为React开发人员提供了强大的工具，使实现...
dnd-kit-in-reagent:在试剂中使用dnd-kit的测试场
03-28
【标题】"dnd-kit-in-reagent:在试剂中使用dnd-kit的测试场" 提供了一个关于在Clojure编程环境中应用dnd-kit库的实践场景。dnd-kit是一个用于处理拖放操作（Drag-and-Drop）的工具，而Reagent则是一个用于构建React...
react-dnd-treeview:一个可拖放的基于React的Treeview组件。 您可以使用渲染道具自由创建每个节点
04-05
ReactDnD TreeView 基于React的可拖动/可拖放的Treeview组件。 您可以使用渲染道具自由创建每个节点。 演示版 | 示例（在CodeSandbox上） 下面的一些示例使用Material-UI组件，但是TreeView不依赖Material-UI，...
react-dnd实现表单动态定点拖拽排序
weixin_46015250的博客
10-17 1578
react-dnd实现表单动态定点拖拽排序 表单拖拽排序
使用 dnd 套件和 React 构建看板
分享身边生活经验blog
09-06 495
DND Kit是块上的新“套件”（这个笑话归咎于创作者），对于那些寻求React-beautiful-DND替代品的人来说，它看起来很有希望。在本教程中，Windows 11电脑声卡驱动怎么安装？教你五种方法轻松搞定我们将创建一个基本的看板，同时了解 dnd 套件及其功能。
react可视化表单，低代码平台，表单生成器，逻辑跳转表单设计
youjia727的博客
05-13 840
form-active是新开发的可视化表单低代码平台，传统的表单设计只有拖拽组合的功能，form-active里面增加了逻辑关联、排序、常用组件存储等功能，能够更好的适用于日常需求。如果您还有其它使用场景，比如导出页面，保存数据等，还请耐心等待，后面会陆续的添加新的功能需求，希望在未来开发中，form-active表单设计 能成为你在表单设计的第一选择。
React 好用的工具库
大灰狼的小绵羊哥哥的博客
03-01 1665
俗话说的好 工欲善其事，必先利其器。笔者在开发 React 项目的时候，总结出一些很不错的 React 库，可以提高开发效率，满足业务需求，接下来将一一介绍它们。 UI组件库 Ant Design 要说 React 最受欢迎的 UI 组件库，那么我第一个想到的就是 Ant Design，Ant Design 提供了数十种常用的组件，比如 Button，Menu ，Table 等。 Ant Design不仅功能强大，还配置灵活，深受广大 React 开发者的喜爱。而且在 github 上已经取得 74.
前端10大开源拖拽排序库汇总, 让搭建,更简单
趣谈前端
04-01 4736
❝hi, 大家好, 我是徐小夕,之前和大家分享了很多「低代码可视化」和「前端工程化」相关的话题, 今天继续和大家分享「8」个非常流行的开源「拖拽排序」库以及「2」个非常有价值的「可视化搭建」解决方案.❞1. dragula一款强大且兼容性极好的拖拽排序库, 兼容「IE7+」, 并且支持 「vanilla JavaScript / Angular / React」等框架.「...
对于低代码技术库的选型
nihaio25的博客
08-25 2885
零代码平台在企业数字化转型的过程中不可或缺，这要从零代码的特性讲起。企业想要实现某个业务问题的信息化、数字化：常规的选择一是自主开发软件，不具备软件开发能力的企业；第二个常规选择是购买成品化软件。但这两种方式都存在一定的问题，而零代码开发平台可以作为很好的补充或者替代选择。......
【React】1783- React 拖拽排序组件库对比研究
pingan8787
08-24 560
作者：青火_https://juejin.cn/post/7062625911312646175一、用法简介基于react的拖拽功能，有这么几个比较流行的库：react-dnd[1]react-beautiful-dnd[2]dnd-kit[3]react-sortable-hoc[4]React-dnd（一）基本概念Backend：后端主要用来抹平浏览器差异，处理 DOM 事件，同时把 DOM ...
解决dnd-kit点击事件和拖拽事件的冲突
weixin_43541528的博客
11-28 3107
使用dnd-kit库解决点击事件和拖拽的冲突
yarn命令 如何更换 @monaco-editor/react版本？ @monaco-editor/react哪个版本稳定？
07-14
要更换 `@monaco-editor/react` 的版本，你可以以下 `yarn` 命令： ``` yarn upgrade @monaco-editor/react@<版本号> ``` 将 `<版本号>` 替换为你想要使用的具体版本号。运行该命令后，`yarn` 将会尝试升级 `@monaco-editor/react` 到指定的版本。 至于哪个版本的 `@monaco-editor/react` 是稳定的，你可以参考它的发布记录（changelog）或者官方文档中的版本说明。通常来说，较新的版本会包含 bug 修复和功能改进，但也可能会引入新的问题。因此，你可以根据你项目的需求和其他依赖项的兼容性来选择一个合适的稳定版本。 你可以查看 `@monaco-editor/react` 的官方 GitHub 仓库或者 npm 包页面来获取更多关于不同版本的信息和稳定性评估。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值