antd 拖拽表格排序拖拽后行消失的问题

最新推荐文章于 2024-05-18 17:28:31 发布

阿凡驴的小毛提

最新推荐文章于 2024-05-18 17:28:31 发布

阅读量1.3k

点赞数

分类专栏： react 文章标签： javascript 前端 react

本文链接：https://blog.csdn.net/qq_42802698/article/details/126972944

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言

使用antd Table中的拖拽手柄列时出现拖拽行消失，可以查看react-sortable-hoc，上面有完整API
拖拽排序

排序时项目消失/CSS问题

排序后，react-sortable-hoc创建正在排序的元素的克隆（即sortable-helper），并将其附加到<body标记的末尾。原始元素仍然是in-place，以保持其在DOM中的位置，直到拖动结束（使用inline-styling使其不可见）。如果sortable-helper从CSS的角度来看变得一团糟，那么考虑一下，您的可拖动项的选择器可能依赖于一个不再存在的父元素（同样，因为sortable-helper位于<body>的末尾）。这也可能是一个z-index问题，例如，当在引导模式中使用react-sortable-hoc时，您需要增加SortableHelper的z-index，以便它显示在模式的顶部

解决方案

1.设置z-index

代码如下（示例）：

.row-dragging {
  background: #fafafa;
  border: 1px solid #ccc;
  z-index: 10000 !important;
}
.row-dragging td {
  padding: 16px;
}
.row-dragging .drag-visible {
  visibility: visible;
}

重点就是这个z-index

2.z-index无效的情况，是不是使用了Modal

需要添加helperContainer属性更改容器

helperContainer

代码如下（示例）：

const modalBody = useRef<any>(null);
<Modal ref={modalBody}>
	<SortableBody
      useDragHandle
      disableAutoscroll
      helperClass="row-dragging"
      onSortEnd={onSortEnd}
      helperContainer={modalBody.current}
      {...props}
    />
</Modal>