DragOverlay Not Working With Sortable Context

[clauderic]

DragOverlay Not Working With Sortable Context

[alimertcakar]

I thought DragOverlay was supposed to show in the place of the item being dragged too.
However, I quickly figured out that this is not the intended case for this library as clauderic pointed out too.

You need to disable transform property of the Draggable component for the desired effect.

E.g:

const Draggable = ({...,hasDragOverlay,...}){
...
const style = {
    transform: hasDragOverlay ? "unset" : CSS.Translate.toString(transform),
  };
...
}
// set hasDragOverlay to true if you are gonna use DragOverlay

[clauderic]

Hey @LuisOsta,

I'm not sure I understand the problem. Can you elaborate?

The <DragOverlay> component provides a way to render a draggable overlay that is removed from the normal document flow and is positioned relative to the viewport and follows the cursor. This seems to be working as expected in the video you posted above.

As for the sortable items, they move in response to the collision detection algorithm detecting which item the drag overlay is currently over, and their position updates depending on the sorting strategy, which also seems to be working as expected in the video you posted.

[LuisOsta]

Hey @clauderic ,
Ah I think I misunderstood <DragOverlay>, I wanted to display a component in the original slot that the dragged component was in> (like a card with the index).

Everything around the sortable context works as expected, my confusion was around why the DragOverlay wasn't displaying in the original location of the SortableItem

What would be the best way to achieve that?

Edit:
I basically want something similar to the Checker on drag effect, but instead of displaying the options, it should display in the original tile.

[clauderic]

Hey @LuisOsta, to be honest I'm not really sure I understand your use-case well. Is there something that you could point me to to help me better understand what you're trying to achieve?

[clauderic]

I'm going to close this issue for now as there does not seem to be any issue with the library, but we can continue discussing here.

[Rudra072]

Hey I am having trouble here which is that i am just unable to move my task into another column its like they are stuck with their parent column as well as it has some weird transition when i sort my tasks into same column so ya help me out pls

2024-03-10.22-48-47.mp4