Earlier today, while working on a project we found that our drag drop performance was very slow. We although like jquery but were annoyed by the performance of drag and drop.
Then we realized that our HTML is pretty more than others hence the CSS. When we started debugging ,we found , when we remove the CSS all gets well and jquery drag drop performance retains.
Within a few minutes we had narrowed down the problem to two things:
1. Padding
2. Position Relative
First ,when we removed *{padding:0} from CSS our jquery drag drop improves a bit. And after a while we removed position:relative from body tag , amazingly all get well and drag drop started working well.
Conclusion:
- Remove *{padding:0} from CSS and use reset.css rather.
- Remove position:relative from the parent div of draggable or sortable.
- Reduce number of droppables in HTML. Maintain it to single container div.
Cheers!
Comments
Wow, Great post I had no idea
Well i also didn’t know about the slow proformance, great to know here, and i would try to experience the same thing now.
Then we realized that our HTML is pretty more than others hence the CSS. When we started debugging ,we found , when we remove the CSS all gets well and jquery drag drop performance retains
The position – css is an important thing in programming. Especially when you want to do things directly on that page, without reloading te page all the time.
Thats why this is an interesting and nice article!