How can I make my jquery draggable / droppable code faster?

Question

I\'ve used JQuery to make the elements in a table draggable. (I\'ve never used JQuery before this). It works fine, but is very slow. For example, from the moment I

Answer 1

I don't suppose its to do with addClasses ? If set to false, will prevent the ui-droppable class from being added. This may be desired as a performance optimization when calling .droppable() init on many hundreds of elements.

Answer 2

As a first step, double check that you're using the latest version of jQuery. As I recall, they recently started making use of much faster browser apis (when available) to get the location of dom elements within the display. I think this was mentioned in a presentation John Resig gave recently, and drag and drop was the primary demo of the performance improvement.

Answer 3

The presence of so many drop targets seems to make the performance so slow. If possible, try setting the table as a single drop target and calculate the target table cell based on the position data in the drop event.

Unfortunately, you will also lose the ability to apply styles to individual cells on dragOver and dragOut events.

Edit: Another suggestion is to disable droppable on all tds and upon mouseover of a tr, enable the droppables of tds present in the specific tr (and disable them back upon mouseout of tr). Sounds like a hack, but worth a try.