Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Sortable's DragOverlay preview gets size mixed up.

See original GitHub issue

See issue demonstration here; https://i9e6e.csb.app/, and drag the 1 on top of the 9.

size

Sandbox: https://codesandbox.io/s/heuristic-khayyam-i9e6e?file=/src/Item.js

Proper behavior should be that the preview of the DragOverlay retains the size of the 1 box, instead of making the bad assumption that all boxes are of the same dimensions.

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:10 (3 by maintainers)

Top GitHub Comments

5reactions

claudericcommented, Sep 18, 2021

@ekawatani the issue you’re facing is unrelated. You are most likely using CSS.Transform.toString() instead of CSS.Translate.toString().

1reaction

321ckatz123commented, Sep 21, 2022

If anyone runs into this issue as I did, in addition to not scaling the item (either via the helpers provided, or manually), change the strategy to verticalListSortingStrategy. I was using the default rectSortingStrategy and that causes a similar issue to what was shown above.

Top Results From Across the Web

Multiple rows of the items with different sizes #507 - GitHub

I have multiple rows of the items with different sizes and they get mixed up while dragging. When I use horizontalListSortingStrategy and move ......

Drag Overlay - dnd-kit – Documentation

The <DragOverlay> component provides a way to render a draggable overlay that ... If you'd like to show a preview of where the...

A Modern, Lightweight, Performance Drag and Drop toolkit for ...

The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React. Features: Built for React: exposes hooks such as useDraggable ...

drag and drop library dnd-kit not working in my React example

The issue is casued by the id 0. Basically the id that you pass to the useSortable hook has to a be a...

The dnd-kit from clauderic - GithubHelp

Supports a wide range of use cases: lists, grids, multiple containers, nested contexts, variable sized items, virtualized lists, 2D Games, and more. Zero ......