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

»

Kubernetes: Why Today’s Programmers Need to Understand

Launched by three Google engineers, Kubernetes is a container ...

»

Do I Need Endpoint detection and response tools ?

Endpoint detection and response (EDR) tools are designed to add an ...

»

How to Build a Killer Marketing Strategy for your WordPress Blog?

Running a blog over WordPress is seemingly an easy thing to do. The ...

»

5 Signs You Need a New Hosting Company

Web hosting has become cheaper and easier to attain than ever before. ...

»

5 Things to Consider When Designing A Logo For Your Startup

Designing a Logo is essential because it communicates your business. ...

»

What Is Access Control?

Access Control, When running a business, there are dozens of things ...

»

Process Management Solution For a Business

In order to be successful, a company needs to be on the same page and ...

»

5 Metrics You Should Track on Every Blog Post

As a blogger, you may have developed your blog with a variety of blog ...

»

3 of the Most Dynamic LMS Plugins for WordPress

The possibilities are limitless when you want to put a course online ...