我的问题是,所选元素的样式在拖动时丢失。我使用的是反应可排序的临时库,它不提供相关信息。他们的例子没有这个问题。样式始终与原始项目相同。
<tbody>
{items.map((value, index) => (
<SortableItem key={`item-${value.code}`} index={index} sortIndex={index} value={value} />
</tbody>
const SortableItem = SortableElement(({value, sortIndex}) => (
<DragHandle sortIndex={sortIndex}/>
<td>{value.label}</td>
<td>{value.beta.toString()}</td>
<td>{value.prod.toString()}</td>
<td>{value.hidden.toString()}</td>
));
const DragHandle = SortableHandle(({sortIndex}) => <td>{sortIndex}</td>);
以下是我在选择和拖动元素之前的列表。
当我选择并开始拖动第一个元素时,这是我的列表。
发布于 2020-10-20 21:42:46
对我来说,问题在于CSS的层次结构和特性,我定义了与父项目相关的项目样式。就像这样:
.list .item{
}
但是,在拖动项时,元素不再链接到父类,而是在父类之外成为单独的元素。因此,它失去了它的所有造型!因此,为了解决这个问题,我们可以在全局范围内定义项和父样式,如下所示:
.list{