Issues with dnd in production

[Daddyjohn63]

I added a Trello like project board to my Next JS 14 app. It works perfectly in dev mode and after I create a build on my local computer. But when I loaded the app to my VPS, I started to get issues. I have no console errors in the server, db or browser and no network errors.

As an example, I have lists that have cards in them. The user can dnd lists or cards within or between lists. If I try an drag a list, the card can be seen to come away from the list and move over to the right of the screen. I have done a code compare on the css and they seem to be identical between local and the vps install.

[thomasreuvers]

@Daddyjohn63 I have the same issue. Did you already happen to fix this by any chance?

[Daddyjohn63]

Hi Thomas, I made a number of changes and not sure exactly the one that got the job done. My problem was intermittent and mostly happened when I had more than three lists with tasks in them . I first added a drag handle to each element that could be dragged. The user can only drag by using the drag handle. This minimises the area in which drag events can fire . This is something recommended by the Trello Devs. I also had a couple of quite expensive functions for calculating dates and tasks progress. If I moved one element, all elements rerender and hence a lot of computation. I used useMemo to fix this. I did wonder if my problem was state and the dB getting out of synch, but my testing showed this was working fine. So was definitely DOM related. There were also some CSS issues that Cursor fixed for me. But cannot recall what these were. Hope this helps. John Paul Mobile: 07739 875445

…

On Tue, 29 Apr 2025, 09:45 Thomas Reuvers, ***@***.***> wrote: @Daddyjohn63 <https://github.com/Daddyjohn63> I have the same issue. Did you already happen to fix this by any chance? — Reply to this email directly, view it on GitHub <#887 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADZANWUHOQSG26WLPSGIJND2343YZAVCNFSM6AAAAABWBOZSHWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEOJXHAZTSMQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>