clauderic / clauderic/dnd-kit

[React] How to customize OptimisticSorting / Feedback?

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

Description

Hey guys,

I have a sortable grid that requires a bit of custom functionality. The grid needs to behave as such that if an item is dropped on the left/right 33% of another grid item, it's positioned on the left/right of it once the item is dropped. If it's dropped on the center it needs to be 'combined' into a folder.
To facilitate this, I've created a custom collisionDetector that adds a 'zone' to the returned data. This all seems to work as expected.

```
const getHorizontalZone: CollisionDetector = ({ dragOperation, droppable }) => {
const pointerCoordinates = dragOperation.position.current;

if (
!droppable.shape ||
!pointerCoordinates ||
!droppable.shape.containsPoint(pointerCoordinates)
) {
return null;
}

const droppingRect = droppable.shape.boundingRectangle;

const relativeX = pointerCoordinates.x - droppingRect.left;
const third = droppingRect.width / 3;

const zone: DropZone =
relativeX < third
? "left"
: relativeX < third * 2
? "middle"
: "right";

return {
id: droppable.id,
value: 1,
priority: CollisionPriority.Normal,
type: CollisionType.Collision,
data: {
zone,
},
};
};

// Within my grid item:
useSortable({ id: item.id, index, collisionDetector: getHorizontalZone });
```

The problems I'm facing is that I need to overrule the feedback and / or the optimistic sorting that happens and I'm not exactly sure how.
Ideally, I don't want to apply optimistic sorting and as feedback I'd like my grid items to 'make a little' space for the new item, but not as much as the whole item (as what currently happens). When the target zone is 'middle', the target item should scale a bit.

I've tried toying around with my own Feedback plugin based off of the actual Feedback plugin, but console.logs don't show up and any tweaks I make to the applied styles don't seem to work either :( The only this that gives me any effect really is changing the configuration 'feedback'. I'm kind of lost and frustrated at the moment...

Can anyone please give me some pointers on where I should start?

Contributor guide

Open the contributing guide

Research direction

Start with the useSortable call and the custom collisionDetector shown in the issue, then read the existing Feedback plugin and the feedback configuration path. Determine which extension points control optimistic sorting, feedback styles, and the returned zone data. Done means identifying a supported way to suppress or adjust sorting feedback and handle the left, middle, and right zones.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 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.