Drag and drop performance in jquery is slow? Here is the fix

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!

Recently Published

»

Docker: How To Build Better Development Security With It

The top concern among developers and DevOps teams is security within ...

»

Mobile Development: How to Reduce Costs

Modern markets have become so competitive that it has become vital ...

»

Know-How DevOps Benefits Your Business

The organizations in this current fast-paced environment need to ...

»

10 Best Prototyping Tools for UI/UX Designers

Website design for a client gets only successful if you follow their ...

»

Social Media Marketing: Strategy To Boost Ecommerce-Traffic

According to a recent study, the experts revealed that people aged ...

»

How Flutter Can Help Reduce Overall Mobile App Development Cost?

Before jumping on answering the question, let me first walk you ...

»

Which One is Better? DigitalOcean Or AWS?

Digitalocean or AWS: Picking a cloud service for your application or ...

»

Killing way to select Domain Name and Hosting

Planning to launch your online presence? We know it’s all very ...

»

7+ blogs to inspire how they made more than $200 in a day

On this page I want to go through the blogs on how they earn money ...