**1.问题是什么 **
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,
},
}}
/>