等待过渡元素被删除@dnd-kit React

Question

我在我的React项目中使用@dnd-kit，我尝试从下列表插入元素到上列表。我想控制占位符的转换，直到元素被插入，所以它不会跳转。不幸的是，转换发生了，因为当isOver为假时，expanded类消失了。有人知道我该如何先等待插入，然后再进行转换吗?这里是codesandbox https://codesandbox.io/p/sandbox/friendly-moser-ih8v08

的链接

Answer 1

我不确定我得到了你需要的，但这就是我所做的:

CartItem。tsx添加:

你可以使用过渡，但你需要切换到useSortable，它的工作原理是一样的。

import {useSortable} from '@dnd-kit/sortable';
import { CSS } from "@dnd-kit/utilities";
const {
isDragging,
setNodeRef,
attributes,
listeners,
transform,
transition,
} = useSortable({
id: item,
data: {
text: item,
position,
type,
},
});
const style = {
transform: CSS.Translate.toString(transform),
transition,
opacity: isDragging ? 0.5 : 1,
};

在App.tsx中，我更改了DraggStart和DraggEnd。首先将width设置为0，然后在拖拽结束后将其设置为width。

function handleDragStart(event: DragStartEvent) {
const { active } = event;
setPlaceholderWidth(0);
setActiveId(active.id.toString());
setActivePosition(active.data.current?.position);
}
function handleDragEnd(event: DragEndEvent) {
setActiveId(null);
setActivePosition(-1);
const { active, over } = event;
const activeElement = document.getElementById(active.id.toString());
if (activeElement) {
const rect = activeElement.getBoundingClientRect();
const { width } = rect;
setPlaceholderWidth(width);
}

这不是最好的解决办法，但我希望它能有所帮助。

p。如果你有掉落动画的问题，你可以使用drop-animation prop

来改变它