help me decide how to attack this use-case using jQuery...
Hi,
I have written a simple jQuery application to allow users to arrange a
"page" worth of photos from a larger set of pictures.
A real life analogy would be a box of photographs sitting next to a
small desk space... the person pulls photos out of the box and
positions them on the desk in the order they choose. They can also
put a photo back in the "box" if they don't want it anymore.
I've attacked this by using two jQuery UI sortables connected through
"connectWith." The sortables sit side-by-side, each on their own
scrollable DIV and you can drag images back and forth and it works
great.
The problem comes when the "box" contains too many images. 90% of the
time for my application, this is not a problem. But there are two
edge-cases where the "box" can contain 2000+ photos and this results
in a huge delay upon clicking.
I've had a brief look into this and the delay comes from somewhere
beneath refreshPositions() (in ui.sortable.js) but I haven't had time
to look any further yet.
I did notice another post in this group about the jQuery event system
slowing down draggables... and someone created a lightweight plugin
(ppdrag) to speed this up. Do you think this is an angle worth
pursuing?
I'm reluctant to change the app too much because if it wasn't for this
slowdown, it's perfectly usable and was very easy to implement (and
therefore maintain).
One thing to note is that the "box" (the 2000+ item list) doesn't need
to be "sortable" as such... it's only the "page" that the user wants
to arrange. But the union of the "box" and the "page" should always
amount to the same set of images.
Any help/ideas would be really appreciated...
Thanks,
Jamie