jQuery UI - Performance penalty on multiple draggable?

Question

Hi there,

I have a question regarding performance. Is there a performance penalty when I call draggable (with all the same options) on already draggable Elements?

I have Speech Bubbles which are draggable on a drag container (say, a comic). These Bubbles are also droppables because you can chose which kind of Bubble (speaking, angry, thinking, etc) it is by dropping the corresponding icon on them. This all works well expect for one case. When I add a new Bubble, this new Bubble is not covered by the draggable call i made in the beginning during init. What I naturally have to do is rebind. Now comes the part where I asked my self this question. Unbinding all bubbles first, then re apply the droppable object (by simply recalling the init function for bubbles) won't do any good because it looses the draggable tag. So I asked myself if I can simply redo a draggable without loosing performance because of double binding the same functions.

I can't really test it because I develop on a 21" iMac, which is way faster than the Computers that this Web-app will be used on (Education e.g. elementary schools) where performance might be an issue.

EDIT: The actual Question is, if I define a new droppable on an element that already is droppable, will it only change the options or will it apply a whole new draggable and double bind it? The Question sounds weird, but the App already has 2k+ lines of jQuery+jQueryUI Code whit a lot of drag&drop functionality and I cannot use unbind light-headed.

EDIT_2: I haven't considered the destroy function of jQueryUI. Might try that one.

Answer 1

Most of jQuery UI uses the same general format for destroying the bindings and setup done, or altering options post setup.

jQuery UI/Draggable

Destroying a draggable:

$("#bubble1").draggable('destroy');

Changing an Option:

$("#bubble1").draggable('option', 'scope', 'someNewValue');

Not really sure where your question was headed, I would think if you create a new bubble - you just setup the new bubble as a dropbabble, and change options on the old ones.

As far as performance goes, I would think think any performance hits from "double binding" can be avoided if you destroy the old instance first, then set it back up, or just change an option in the draggable.