I am getting this weird glitch, while working with dnd-kit. I have an implementation of dnd-kit to handle drag and drop feature for column list.
whats working:
- Feature itself is working. drag and drop
- saving of the updated list.
The glitch:
Once drag and drop is working fine. Second time the item dragged initially is swapping to its original position, if it is overlapped. This is happening with multiple items in the list as well.
I have tried to fix by passing transition (animation style), checked keys but nothing working.
Also tried library version:
“@dnd-kit/core”: “^6.0.8”,
“@dnd-kit/sortable”: “^7.0.2”,
“@dnd-kit/utilities”: “^3.2.1”,
export const SortableItem = ({ children, id, styles, dragStyles }) => {
const { setNodeRef, attributes, listeners, transition, transform, isDragging } = useSortable({
id
});
const style = {
transition,
transform: CSS.Translate.toString(transform),
opacity: isDragging ? 0.7 : 1,
zIndex: isDragging ? 1 : 0
};
return (
<SortableItemWrapper key={id} ref={setNodeRef} style={style} customStyles={styles}>
<DragAct {...listeners} {...attributes} styles={dragStyles} isDragging={isDragging}>
<Drag />
</DragAct>
<SortableChildren>{children}</SortableChildren>
</SortableItemWrapper>
);
};
const SortItems = ({ itemsKeys, state, setState, uniqueKey }) => {
return (
<div>
{state?.length > 0 ? (
<Sortable
items={itemsKeys}
sortItems={state}
setSortItems={setState}
uniqueKey={uniqueKey}
>
{state?.map(column => {
const columnKey = getColumnKey(column);
return column ? (
<SortableItem
key={columnKey}
id={columnKey}
styles={sortableItemStyles}
dragStyles={dragStyles}
>
<ColumnItem id={columnKey} column={column} getColumnKey={getColumnKey}></ColumnItem>
</SortableItem>
) : (
<></>
);
})}
</Sortable>
) : (
<p>
<i>No results found</i>
</p>
)}
</div>
);
}
Abhishek Chouhan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.