Scale Property and Drag-and-Drop in Swapy
Author: VoltextCreated Jan 1, 2025Updated Feb 21, 2026
Hello,
I am currently developing a feature for my NextJS application using Swapy, and I’m encountering challenges when applying the "scale" property to my container.
Specifically, I would like the container to maintain a size of 1920px by 1080px while preserving proportions based on the user’s screen size.
However, when I apply this property, the drag-and-drop functionality of Swapy items interprets the scale property a second time, disrupting the grid organization.
I’ve attached screenshots and a snippet of code to illustrate the issue.
Best regards,
PS: Happy New Year to everyone!
Drag item
Drag item and move with it
initial state of the grid
`
{/* Container */}
<div
ref={container}
className="grid size-full grid-cols-4 grid-rows-20 gap-4 p-4 2k:scale-[1.15] w-[1920px] h-[1080px] origin-top-left"
>
{/* Bloc A - En haut */}
<div data-swapy-slot="a" className="item col-span-4 row-span-3">
<div
data-swapy-item="a"
className="flex size-full items-center justify-center rounded bg-teal-500 p-4 text-2xl font-bold text-white"
>
A
</div>
</div>
{/* Bloc B - En bas à gauche */}
<div data-swapy-slot="b" className="row-span-10 row-start-4">
<div
data-swapy-item="b"
className="flex size-full items-center justify-center bg-indigo-600 rounded text-2xl font-bold text-white"
>
B
</div>
</div>
{/* Bloc C - En bas à droite */}
<div
data-swapy-slot="c"
className="col-start-1 row-span-5 row-start-14"
>
<div
data-swapy-item="c"
className="flex size-full items-center justify-center rounded bg-indigo-600 p-8 text-2xl font-bold text-white"
>
C
</div>
</div>
{/* Bloc D - Dernière ligne */}
<div
data-swapy-slot="d"
className="row-start-19 col-start-1 row-span-2"
>
<div
data-swapy-item="d"
className="flex size-full items-center justify-center rounded bg-indigo-600 p-8 text-2xl font-bold text-white"
>
D
</div>
</div>
{/* Bloc E - Dernière ligne */}
<div
data-swapy-slot="e"
className="col-span-2 col-start-2 row-span-10 row-start-4"
>
<div
data-swapy-item="e"
className="flex size-full items-center justify-center rounded bg-purple-600 p-8 text-2xl font-bold text-white"
>
E
</div>
</div>
{/* Bloc F - Dernière ligne */}
<div
data-swapy-slot="f"
className="col-span-2 col-start-2 row-span-7 row-start-14"
>
<div
data-swapy-item="f"
className="flex size-full items-center justify-center rounded bg-purple-600 p-8 text-2xl font-bold text-white"
>
F
</div>
</div>
{/* Bloc G - Dernière ligne */}
<div
data-swapy-slot="g"
className="col-start-4 row-span-11 row-start-4"
>
<div
data-swapy-item="g"
className="flex size-full items-center justify-center rounded bg-green-600 p-8 text-2xl font-bold text-white"
>
G
</div>
</div>
{/* Bloc H - Dernière ligne */}
<div
data-swapy-slot="h"
className="col-start-4 row-span-4 row-start-15"
>
<div
data-swapy-item="h"
className="flex size-full items-center justify-center rounded bg-green-600 p-8 text-2xl font-bold text-white"
>
H
</div>
</div>
{/* Bloc I - Dernière ligne */}
<div
data-swapy-slot="i"
className="row-start-19 col-start-4 row-span-2"
>
<div
data-swapy-item="i"
className="flex size-full items-center justify-center rounded bg-green-600 p-8 text-2xl font-bold text-white"
>
I
</div>
</div>
</div>
</>
`
Source: TahaSh/swapy