clauderic / clauderic/dnd-kit

[Experimental] Prevent Drop Under Certain Conditions

Open
#1,745 1 comment 2 reactions 0 assignees View on GitHub
experimental helpers question react triage:done
Dominant language
TypeScript
Stars
17.6k
Forks
924
Avg merge
2d 10h
Merged PRs (30d)
2

Description

I'm facing this issue/bug or idk if I'm missing something.
I want to prevent a drop under certain conditions in certain columns, the first times works well, but after various drops I can drop any item in any column.

these are my versions that I'm using:
"@dnd-kit/abstract": "^0.0.9",
"@dnd-kit/core": "^6.1.0",
"@dnd-kit/helpers": "^0.0.9",
"@dnd-kit/modifiers": "^7.0.0",
"@dnd-kit/react": "^0.0.9",
"@dnd-kit/sortable": "^8.0.0",
"@dnd-kit/utilities": "^3.2.2",

This is basically my code:

`
return (
{
const activeData = event.operation.source?.id;

const overData = event.operation.target;
let overDataName: string | null = null;

if (overData?.type === "column") {
overDataName = overData.id as string;

const propName = `${overDataName}Production/Hour`;
console.log({ overDataName });
console.log({ activeData });

const mustSkip = Object.values(lineas).some((items) =>
items.some(
(line) =>
line.id === activeData &&
(line as Record)[propName] === 0
)
);

if (mustSkip) return;
}

const current = lineas;

const newItems = move(current, event);

dispatch(setAllLines(newItems));
}}
>


{Object.entries(lineas).map(([column, items]) => (

{items.map((item, index) => (

dispatch(updateQuantity({ id, value, line: column }))
}
/>
))}

))}


);

`

Contributor guide

Open the contributing guide

Research direction

Start at the DragDropProvider onDragEnd handler and trace how event.operation.target, the column data, and move(current, event) determine the resulting state. Reproduce repeated drops with the listed dnd-kit versions; done means items meeting the condition remain prevented from being dropped in restricted columns after multiple moves.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.