jQuery Drag And Drop Using Live Events

Question

I have an application with a long list that changes frequently, and I need the items of that list to be draggable.

I've been using the jQuery UI draggable plugin, but it is slow to add to 400+ list items, and has to be re-added every time new list items are added.

Does anyone know of a plugin similar to the jQuery UI draggable plugin that uses jQuery 1.3's .live() events? This would solve both problems.

Answer 1

Wojtek's solution worked perfectly for me. I wound up changing it a tad bit to make it extend jQuery...

(function ($) {    $.fn.liveDraggable = function (opts) {       this.live("mouseover", function() {          if (!$(this).data("init")) {             $(this).data("init", true).draggable(opts);          }       });       return this;    }; }(jQuery)); 

Now instead of calling it like:

$(selector).draggable({opts}); 

...just use:

$(selector).liveDraggable({opts}) 

Answer 2

This is a sample of code that perfectly worked for me

$('.gadgets-column').live('mouseover',function(){     $(this).draggable(); });