Lag on dragstart

[trevorgeise]

In my SPA I'm experiencing a pretty nasty lag when I start a drag. Writing to see if anyone has any ideas. I've been trying to troubleshoot this for a while now and no luck. Seems to scale with the number of draggable objects rendered. With about 35 objects it takes 1-2 seconds to start. Everything just hangs for the second or two.

I've tried recreating this from the ground up but can't recreate the issue.
I've tried stripping down and simplifying my app, but can't get it to a place where there is zero lag. Even if there are only a couple elements draggable, there is still a tiny lag, compared to the demos which have zero lag on start.

Honestly, it might not have anything to do with Easy-dnd, but I've run out of things to try here.

I'm using Vue 2, the latest easy-dnd, and Vuetify.
I have nested drop-lists. Think a bulleted list where each bullet can have a new drop-list indented below it. But even if is rip out all the easy-dnd stuff from these nested bullets, and just wrap a random div in the drop component, there is still lag.

I did a performance analysis in Dev tools and it looks like there is a lot of recalculating style going on that is slowing it up, and a ton of animation that gets triggered.

I know Vuetify adds a lot of extra stuff, but I've tried reducing it down a lot and it still has not helped. Tried removing an things and menus, no help.

I've tried to streamline my components and the props, so they are not needlessly re-rendering, which I think I've done. I've tried removing extra CSS to see if there was some kind of repainting thing. Everything is in absolutely positioned divs, so maybe there is an issue there, but it has not helped to change that.

All in all I'm out of ideas of how to troubleshoot this anymore. Any one of have some suggestions or ideas of what might be going on?

Appreciate it!

[nicholaszuccarelli]

Honestly, it might not have anything to do with Easy-dnd, but I've run out of things to try here

Wrong, it is definitely the package :)
I am having the same issues with my personal project. I sometimes have hundreds of draggable items on the page and the lag can be quite significant.

Unfortunately my javascript performance skills aren't the greatest so I've tried my best to make this package as performant as possible, but I think I'm at my personal limits.

I've tried to streamline my components and the props, so they are not needlessly re-rendering, which I think I've done. I've tried removing extra CSS to see if there was some kind of repainting thing. Everything is in absolutely positioned divs, so maybe there is an issue there, but it has not helped to change that.

Again, I've done the same as well and still experience lag.

I did a performance analysis in Dev tools and it looks like there is a lot of recalculating style going on that is slowing it up, and a ton of animation that gets triggered.

I think you are spot on here. From what I have been able to see, it is with how the DnD dragging ghost is being rendered but I'm personally at my limits of how I can make it even more efficient.

We'd be more than happy for you to fork the project and take a look for yourself :)
The more eyes the merrier.