拖拽排序的行内容溃缩

65 阅读1分钟

**1.问题是什么 ** image.png

2.怎么实现

2.1 DraggableContainer组件的作用:
SortableBody组件添加了onSortStart事件处理函数,当排序开始时,可以进行一些特定的操作。修改了helperClass的值为 "cmAdminRowDragging",可能是为了区分不同的拖拽样式。

2.2 onSortStart函数的作用:
当拖拽开始时,获取被拖拽行的单元格(cells)和拖拽辅助元素的单元格(helperCells)。根据被拖拽行的单元格宽度设置拖拽辅助元素的单元格宽度,以保持样式的一致性。

2.3 .cmAdminRowDragging样式的作用:
为拖拽辅助元素设置特定的背景色、内边距、阴影和边框半径,以增强可视化效果。

.cmAdminRowDragging {
    background: #cecece;
    padding-top: 11px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.no-select {
    user-select: none;
}
onSortEnd = ({oldIndex, newIndex}) => {
  document.body.classList.remove("no-select");
  const {dataSource} = this.state;
  if (oldIndex !== newIndex) {
    const newData = arrayMoveImmutable([].concat(dataSource), oldIndex, newIndex).filter(
      el => !!el,
    );
    for (let i = 0; i < newData.length; i++) {
      newData[i].display_order = i + 1
    }
    this.props.sortProject(newData).then((res) => {
      console.log(res, "xxxxxxxxxxxxxxxxxxxxxxx")
    })
    console.log('Sorted items: ', newData);
    this.setState({dataSource: newData});
  }
};

DraggableContainer = props => (
  <SortableBody
        useDragHandle
        disableAutoscroll
        helperClass="cmAdminRowDragging"
        onSortEnd={this.onSortEnd}
        onSortStart={this.onSortStart}
        {...props}
    />
)

onSortStart = ({node}) => {
    document.body.classList.add("no-select");
    const cells = node.childNodes
    const helperCells = document.getElementsByClassName("cmAdminRowDragging")[0]?.childNodes
    if (helperCells) {
        cells.forEach((cell, idx) => {
            if (helperCells[idx]) {
                helperCells[idx].style.width = `${cell.offsetWidth}px`
            }
        })
    }
}

DraggableBodyRow = ({className, style, ...restProps}) => {
  const {dataSource} = this.state;
  // function findIndex base on Table rowKey props and should always be a right array index
  const index = dataSource.findIndex(x => x.display_order === restProps['data-row-key']);
  return <SortableItem index={index} {...restProps} />;
};

<Table
  bordered
  pagination={false}
  dataSource={dataSource}
  columns={columns}
  rowKey="display_order"
  components={{
    body: {
      wrapper: this.DraggableContainer,
      row: this.DraggableBodyRow,
    },
  }}
/>