jQuery Drag And Drop Using Live Events

Question

Hello. I have an application with a long list that changes frequently, and I need this the items of this 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.

Thanks!

Answer 1

Check out the demo from this site. Is this what you are looking for?

Answer 2

In answer to my own question, I've solved this by writing my own drag and drop library that uses event delegation, and I have posted it to my site. It has a very similar API to jQuery UI, so it should be pretty easy to deal with. http://devongovett.wordpress.com/2009/12/01/event-delegated-drag-and-drop-jquery-plugin/

Answer 3

You could make wrapper function like this:

function liveDraggable(selector, options){
  jQuery(selector).live("mouseover",function(){
    if (!jQuery(this).data("init")) {
      jQuery(this).data("init", true);
      jQuery(this).draggable(options);
    }
  });
}

(I use prototype with jQuery - that's why i placed jQuery() instead of $())

And now instead of $(selector).draggable({opts}) use liveDraggable(selector, {opts})

Answer 4

You can simply use this http://brandonaaron.net/code/livequery/docs It helped me a lot.

Answer 5

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

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

Now instead of calling it like:

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

...just use:

$(selector).liveDraggable({opts})

Answer 6

This is a sample of code that perfectly worked for me

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